脚本宝典收集整理的这篇文章主要介绍了React Axios 解决前端跨域 代理 Proxy,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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 {
...
proxyproxy: {
'/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哈哈~
以上是脚本宝典为你收集整理的React Axios 解决前端跨域 代理 Proxy全部内容,希望文章能够帮你解决React Axios 解决前端跨域 代理 Proxy所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。