vue中域名跨域404的原因

vue中如何实现跨域

关于vue中如何解决跨域的问题，可以参考这篇文章

https://blog.csdn.net/wh_xmy/article/details/87705840

vue中如何实现多域名跨域

多域名跨域，就是该项目中不仅仅只有一个接口需要跨域，可能有两个三个接口都需要跨域。如果是多域名跨域，可以在config/index.js中的proxyTable中写多个匹配规则

pathRewrite的作用&proxyTable实现跨域的流程

在上面链接里的文章中，有这样一句话：“// 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。”，我并不理解这句话是什么意思，于是我试验了一下，以下是我项目的背景和试验的流程：

背景：

有两种跨域的接口，一种是请求到loc-admin.xxx.com，一种是请求到loc-dynamicsite.xxx.com:8086/api/

我的正确写法：

  dev: {env: require('./dev.env'),port: 8082,host: 'localhost',autoOpenBrowser: true,assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/templateApi':{target: 'http://loc-dynamicsite.114my.com:8086/api/',changeOrigin: true,pathRewrite:{  // 路径重写，'^/templateApi': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。}}, '**/*': {target: 'http://loc-admin.114my.com/',changeOrigin: true,filter: function (pathname, req) {if(pathname.indexOf('/api') == 0){return true;}return pathname.match('^/[^static|_|content].*$') || pathname.match('^/api/.*?$')}},},cssSourceMap: false}

最初在配置templateApi时，我没有写pathRewrite，导致接口一直404。添加pathRewrite后神奇的访问成功了。

下面我们修改正确写法中的pathRewrite来看看他是干嘛的：

废话不多说，贴图

我把'^/tempalteApi'更换为‘^/tempalte’，请求一下

我们可以看到在postman的地址栏，请求的是http://localhost:8082/templateApi/Template/Load/，

然后下面的报错信息："Message": "找不到与请求 URI“http://loc-dynamicsite.xxx.com:8086/api/Api/Template/Load/”匹配的 HTTP 资源。"

注意红色部分，上面的红色部分经过proxyTable后变成了下面的红色部分，我直接解释一下proxyTable的工作原理

步骤一：

通过templateApi匹配到proxyTable中的templateApi{}部分

步骤二：

通过pathRewrite里的 '^/template' 将http://localhost:8082/templateApi/Template/Load/，变成了http://loc-dynamicsite.114my.com:8086/api/Api/Template/Load/。

看到没，后面黑色部分是相同的， '^/template'寻找到template之前的部分（包括他自己）‘http://localhost:8082/template’替换成了target里的域名'http://loc-dynamicsite.114my.com:8086/api/'