vue使用proxyTable进行跨域设置Access to XMLHttpRequest at ‘XXXXX‘ from origin ‘XXXXXX‘ has been blocked by C
Access to XMLHttpRequest at 'XXXXX' from origin 'XXXXXX' has been blocked byCORS policy: Response to preflight request doesn't pass access control check:No 'Access-Control-Allow-Origin' header is pres
·
跨域报错内容
Access to XMLHttpRequest at 'XXXXX' from origin 'XXXXXX' has been blocked by
CORS policy: Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击。当,协议名,域名,端口号,三者有一个不同都会发生跨域问题
解决方式有多中,这里主要讲proxyTable方式的处理过程
找到目录
配置标签里
设置跨域内容
proxyTable: {
'/api': { // 这里的/api表示前端项目的根目录
target: 'https://xxx/send', // 目标接口域名
changeOrigin: true, // 是否跨域
secure: true, // 如果是 https ,需要开启这个选项
pathRewrite: {
"/wwp" // 重写接口,将以/api开头的前端请求如:localhost:3000/api/xxx
//改成后端请求,如后端端口为8081,则为localhost:8081/api/xxx
}
}
}
调用
var data={"phone":"1389xxx406"};
this.axios.post('api/wwp',data)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
更多推荐
已为社区贡献1条内容
所有评论(0)