vue proxy pathrewrite,vue配置跨域proxy报错
本文主要介绍了vueproxyTable跨域pathRewrite的配置方式，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vue浏览器跨域问题及vue代理跨域中pathRewrite的配置表为什么Vue浏览器跨域问题同源策略pathRewrite代理配置pathrewrite失败在代理踩坑下的解决方案是什么
vue浏览器跨域问题和vue proxyTable跨域中pathRewrite配置
vue浏览器跨域问题
当浏览器报告以下错误时，请求是跨域的。
localhost/:1无法加载http://www.thenewstep.cn/test/test token . PHP:对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问原点“http://localhost:8080”。如果不透明响应满足您的需要，请将请求的模式设置为“no-cors ”,以便在禁用cors的情况下获取资源。
为什么会跨域
由于浏览器同源策略的限制，不同源的脚本无法操作其他源下的对象。
什么是同源策略
同源策略是一种协议，是浏览器最核心、最基本的安全功能。如果同源策略缺失，浏览器的正常功能可能会受到影响。
可以说Web是基于同源策略的，浏览器只是同源策略的一个实现。
简单来说：如果协议、IP、端口都一样，就是同源。
解决办法
跨域的解决方案有很多，比如脚本标签，jsonp，后端设置cro等等…，但是我这里说的是webpack配置vue的proxyTable来解决跨域。
pathRewrite
简单来说，pathRewrite就是在使用代理的情况下，重定向请求路径以匹配正确的请求地址。
开发人员：{
//路径
资产子目录：静态，
assets public path:“/”，
代理表：{
/api: {
目标： http://XX。XX.XX.XX:8083 ，
changeOrigin:真的，
路径重写：{
/API:/API//http://XX。此接口配置的XX.XX.XX:8083/api/login
///API :/ http://xx。此接口配置的XX.XX.XX:8083/login
}
}
}
},
如何将pathRewrite请求转发到http://XX？XX.XX.XX:8083无需配置，并自带相应的uri。
比如：localhost:8080/api/xxx会转发到http://XX。XX.XX.XX:8083/api/xxx.
配置完成后，需要重新编译。当调用接口时
//获取菜单权限
getPermission(){
这个。$ajaxget({
URL:“/API/get permission”，
数据：{}，
伊斯拉耶：是的，
成功Fc:数据={
console.log(data.data)
}
})
两种数据请求方法：fecth和axios
1、fetch方式
在需要请求的页面上，就这样写(/apis特定请求参数)，如下：
fetch(/APIs/test/test token . PHP ，{
方法： POST ，
标题：{
“内容类型”:“应用程序/json”，
标记：“f 4c 902 c 9 AE 5a 2 a9 D8 f 84868 ad 064 e 706”
},
body: JSON.stringify(数据)
})。then(res=res.json())。然后(data={
console.log(数据)；
});
2、axios方式
Main.js代码
从“vue”导入Vue
从导入应用程序。/App
从“axios”导入axios
Vue.config.productionTip=false
Vue.prototype.$axios=axios //在Vue实例的原型上挂载axios
//设置axios请求的令牌
axios . defaults . headers . common[ token ]= f 4c 902 C9 AE 5a 2 a9 D8 f 84868 ad 064 e 706
//设置请求头
axios . defaults . headers . post[ Content-type ]= application/JSON
Axios请求页面代码
这个。$ axios . post(/APIs/test/test token . PHP ，data)。然后(res={
console.log(res)
})
代理配置proxy下pathrewrite失效踩坑
直接从互联网上找到的代码被复制并报告为错误。最后，我找了一下午为什么会失败。最后发现问题直接破了。
错误：
路径重写：{
/api : //如果请求的路径在目标url下，但不在/API下，它将被转换为null。
},
正确：
路径重写：{
/api : //如果请求的路径在目标url下，但不在/API下，它将被转换为null。
},
原因：
直接复制的“/api”:”多了两个空格，判断url时就拿不到/API了。删除空格将解决问题。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。