Vue proxyTable实现配置多个接口地址并解决跨域的问题

后面遇到需要连接不同的接口域名,我在proxyTable里增加了一个apiGas.axios请求存在获取得到api但是不能获取apiGas(提示请求资源不存在)。

 proxyTable: {
　　& # 39;/api # 39;: {
　　目标:& # 39;http://& # 39;//接口域名
　　changeOrigin:真的,//是否跨域
　　pathRewrite: {
　　& # 39;^/api # 39;: & # 39;/bsgzf/api/认证/& # 39;//需要重写的,
　　},
　　},
　　& # 39;/apiGas& # 39;: {
　　目标:& # 39;http://& # 39;//接口域名
　　changeOrigin:真的,//是否跨域
　　pathRewrite: {
　　& # 39;^/apiGas& # 39;: & # 39;/bsgzf/api/天然气/& # 39;
　　}
　　},
　　},

查找了很多资料都没有具体的解决方法,偶然在一个相同的问题下发现一个回复,让把这两个链接位置换一下,抱着试一试的态度换了,重新运行,结果两个都可以获取了。不知道什么原理? ? ?有知道的请指教! ! !

正解:

 proxyTable: {
　　& # 39;/apiGas& # 39;: {
　　目标:& # 39;http://& # 39;//接口域名
　　changeOrigin:真的,//是否跨域
　　pathRewrite: {
　　& # 39;^/apiGas& # 39;: & # 39;/bsgzf/api/天然气/& # 39;
　　}
　　},
　　& # 39;/api # 39;: {
　　目标:& # 39;http://& # 39;//接口域名
　　changeOrigin:真的,//是否跨域
　　pathRewrite: {
　　& # 39;^/api # 39;: & # 39;/bsgzf/api/认证/& # 39;//需要重写的,
　　},
　　},
　　},

<强> Vue里的proxyTable解决跨域,api接口管理

本文单纯的介绍Vue项目中接口的集中管理以及跨域的解决方法。

<强> 1. webpack里的proxyTable设置跨域:配置→索引。js

从& # 39;进口axios axios& # 39;
　　
　　axios.defaults.baseURL=& # 39;/api # 39;;
　　axios.defaults.headers.post[& # 39;内容类型# 39;]=& # 39;application/json; charset=utf - 8 # 39;;
　　axios.defaults.withCredentials=true//接口自定义//修改用户信息接口
　　出口const updateOneUser=params=比;{
　　返回axios.post(& # 39;/安踏anta-back/src/php/updateUser.php& # 39;, params)
　　不要犹豫(res=比;res.data)
　　};

进口{updateOneUser}“. ./. ./api/api"
　　方法:{//给后台发送数据
　　var params=new URLSearchParams ();
　　params.append (& # 39; userphone& # 39;, this.watchStudentInfo.userphone);
　　params.append (& # 39; userpass& # 39;, this.watchStudentInfo.userpass);
　　console.log (params)
　　updateOneUser (params) (https://www.yisu.com/zixun/data=> {//后台返回的数据
　　如果(data==1) {//添加成功
　　message.success美元。(“修改成功”)
　　其他}{//失败
　　message.success美元。(“修改失败”)
　　}=> {}).catch(错误
　　message.success美元。(“修改失败”)
　　})
　　}