vue 使用axios 出现跨域请求的两种解决方法

水深无声 2023-08-17 17:38 75阅读 0赞

最近在使用vue axios发送请求，结果出现跨域问题，网上查了好多，发现有好几种结局方案。  
1：服务器端设置跨域  
header(“Access-Control-Allow-Origin:\*”);  
header(“Access-Control-Allow-Headers:content-type”);  
header(“Access-Control-Request-Method:GET,POST”);

2：可以自己设置一个代理服务器，使用proxyTable 我比较推荐这种方法。  
首先在config/index.js 里面找到proxyTable ：\{\} ，然后在里面加入

"/api":{
                target: 'http://47.104.218.122:8087',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }

注意这里面 /api是你自定义的，写成什么都可以。target 设置你调用的接口域名和端口号。这里理解成用‘^/api’代替target里面的地址，后面组件中我们调接口时直接用api代替 。比如我要调用’http://47.104.218.122:8087/dictionaryType‘，直接写‘/api/dictionaryType’即可。  
然后我们可以在main.js设置一个基础路径，这样你调用接口的时候可以不写api,直接写/接口名称即可。在main.js 设置 **axios.defaults.baseURL = ”/api”;**  
然后掉接口的时候可以直接写**let  \_url4 = ”/dictionaryTypes”;**这样就比较省事。

this.$axios.get(_url4)
                        .then(response=>{
                            alert(response);
                            alert(1);
                        })
                        .catch(error=>{
                            console.log(error);
                        })

转载于:https://www.cnblogs.com/ysx215/p/11446531.html

发表评论取消回复

表情：

评论列表（有 0 条评论，75人围观）

还没有评论，来说两句吧...

相关阅读

相关解决Vue中Axios发送请求时跨域的问题。

0 写在前面在程序开发时，前后端运行在不同的地方。假设自己的电脑启动前后端，那么他们的端口号不可以冲突。当在Vue发起请求，那么就存在跨域的问题，会被浏览器COR

淩亂°似流年/ 2024年03月27日 16:44/ 0 赞/ 33 阅读

相关 Vue使用Axios实现http请求以及解决跨域问题

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios的中文文档以及github地址如下：中文：[https://www

柔情只为你懂/ 2023年08月17日 17:38/ 0 赞/ 90 阅读

相关 vue 使用axios 出现跨域请求的两种解决方法

最近在使用vue axios发送请求，结果出现跨域问题，网上查了好多，发现有好几种结局方案。 1：服务器端设置跨域 header(“Access-Control-All

水深无声/ 2023年08月17日 17:38/ 0 赞/ 76 阅读

相关 Axios发送请求的时候出现跨域问题

报错信息如下： ![20210309145223976.png][] 跨域问题发生的原因：首先基于安全的原因，浏览器是存在[同源策略][Link 1]这个机制的，同源策

淩亂°似流年/ 2022年10月23日 08:01/ 0 赞/ 144 阅读

相关 React Axios 请求解决跨域问题

网上看了很多的方案，但是不知道为什么，作为初学者，对react不太清楚的话，解决跨域还是有很多的问题。这篇博客针对小白，第一次调试react 跨域问题，甚至第一次使用Axios

秒速五厘米/ 2022年09月10日 02:29/ 0 赞/ 278 阅读

相关【VUE axios】axios跨域方式

1、配置config下的index.js proxyTable: { '/apis': { target: '

爱被打了一巴掌/ 2022年05月19日 06:55/ 0 赞/ 288 阅读

相关 Vue使用Axios实现http请求以及解决跨域问题

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios的中文文档以及github地址如下：中文：[https://www

墨蓝/ 2022年05月15日 00:43/ 0 赞/ 440 阅读

相关 Vue使用axios、解决axios跨域

axios [axios文档][axios] > axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端从浏览器中创建 XML

骑猪看日落/ 2022年03月06日 10:38/ 0 赞/ 592 阅读

相关 vue-cli 3.0 axios 跨域请求

请先阅读[vue官方文档][vue] 创建个 vue.config.js 文件。请勿使用babel.config.js module.exports = {

深藏阁楼爱情的钟/ 2022年02月05日 10:19/ 0 赞/ 224 阅读

相关 vue axios解决跨域

axios解决跨域 1、在config中的index.js文件中将proxyTable后的内容修改为:

阳光穿透心脏的1/2处/ 2021年07月24日 12:46/ 0 赞/ 465 阅读