XMLHttpRequest cannot load http://www.xxx.com/v1. Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3000' is therefore not allowed
access.
前端人员在调接口数据的时候遇到这个问题是不是感觉到脑瓜疼,跨域跨域有又跨域,让后台们用CORS...办法,然后自己就等呀等呢!
其实前端也能解决...
我用 create-react-app 创建的项目,执行了npm run eject 之后 webpack 暴露了...但是不着急
还可以在项目 -- config -- webpackDevServer.config.js 下更改
// 原数据
module.exports = function (proxy, allowedHost) {
return {
...
proxy,
...
}
}
// 更改
module.exports = function (proxy, allowedHost) {
return {
...
proxy: {
'/v1': {
target: 'http://www.xxx.com',
changeOrigin: true,
secure: false,
},
},
...
}
}
// AXIOS地址也要进行下修改
$.ajax({
url:'/v1/code', // 地址不需要写域名啦
type:'POST',
dataType:'json',
success:function(data){
console.log(data);
},
error:function(error){
console.log(error)
}
})
然后就可以继续写代码啦♪(^∇^*)!
最后附赠两幅图
一个是webpackDevServer.config.js更改前
一个是webpackDevServer.config.js更改后的...
有没有感觉很贴心
O(∩_∩)O哈哈~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。