vue中如何实现跨域

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

Vue之Axios跨域问题解决方案_vue axios跨域-CSDN博客

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.xxx.com:8086/api/',
              changeOrigin: true,
              pathRewrite:{  // 路径重写，
                '^/templateApi': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
              }
      
        }, 
        '**/*': {
        target: 'http://loc-admin.xxx.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/'