当前位置: 移动技术网 > IT编程>脚本编程>vue.js > vue axios跨域问题Access-Control-Allow-Origin‘ header is present on the requested resourc解决方案

vue axios跨域问题Access-Control-Allow-Origin‘ header is present on the requested resourc解决方案

2020年07月08日  | 移动技术网IT编程  | 我要评论

最近在使用vue axios发送请求,结果出现跨域问题,报错日志信息为  No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.78.33.255:8444' is therefore not allowed access。针对此问题的解决方案可以有如下两种:
方案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://192.168.3.6:7777',

            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.$http.get("/goods/home").then((res) => {

         console.log(res);

 })

 


 

本文地址:https://blog.csdn.net/javaniceyou/article/details/107169781

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网