开发环境下与后端对接时报错如下
报错信息
Access to XMLHttpRequest at 'http://localhost:5000/plan' from origin 'http://localhost:8888' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
报错原因
查了下是跨域问题
网站开发中的同源策略导致 不同源的地址下的资源不能使用导致
我的开发环境中 vue项目的 地址 http://localhost:8888, 后端接口的地址 http://localhost:5000
所以同源策略导致 后端返回的资源前端不能使用
当然不同地址一般发生在开发环境中 生产环境中大部分情况 后端代码与前端代码是在一个地址下的
解决办法
跨域问题解决思路有两种
前端解决
> 我这里是vue项目 就直接按照vue的办法去解决 当然其他框架肯定早已有前辈们帮我们填坑了 只需动动你 的小手指在网上找找就行
vue cli版本4.x
大致分两步：
- vue项目根目录新建 名为
vue.config.js的js文件 如果已经有了就直接在里边配置
module.exports = {
devServer: {
/* 使用代理 */
proxy: {
'/api': {
/* 目标代理服务器地址 这里是我自己的后端地址 */
target: 'http://localhost:5000/',
/* 是否允许跨域 */
changeOrigin: true,
// ws: true, //代理websockets
pathRewrite:{
'^/api':''//重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
}
},
},
},
}
- 找到你项目中的
axios
设置baseurl
axios.defaults.baseURL = '/api';
我网上找了很多方法都是之说了第一步 然后测试还是老样子
我这边加上第二步后正常了
当然后边还 测试了下只设置代理也是行得通的
-
vue.config.js文件中
module.exports = {
devServer: {
/* 使用代理 */
proxy: 'http://localhost:5000'
},
}
2.axios设置
axios.defaults.baseURL = '';
后端解决
根据异常信息提示 No 'Access-Control-Allow-Origin' header is present on the requested resource.
response header中没有 Access-Control-Allow-Origin字段 想要那就给你
后端返回数据添加
response.headers["Access-Control-Allow-Origin"] = '*'
但是这里测试的如果 vue中 axios.defaults.baseURL= 还是后端的地址的话是没有效果的 可以设置为空字符串或者其他字符串有效
以上。。。请笑纳 有问题欢迎留言讨论
