vue如何通过配置proxy解决跨域问题

原本在用axios做数据请求的时候我就打算用CORS解决跨域问题，奈何跟我做配合的后端成员用natapp做内网穿透给到的数据接口没有在服务器做CORS跨域需要的相关请求头配置，那这个时候就只能在前端解决跨域问题。

在vue中配置代理proxy解决跨域

用vue-cli脚手架搭建的项目里，打开config文件夹里的index.js文件做相关配置

module.exports = {
  dev: {
    proxyTable: {
      '/api1': {  //代理1 当请求路径为：/api1时，相当于请求http://b2se29.natappfree.cc/
        target: 'http://b2se29.natappfree.cc/',  // 服务器地址
        changeOrigin: true,  // 是否跨域
        pathRewrite: {
          '^/api1': ''  // 地址追加
        }
      },
      '/api': {   //代理2 当请求路径为：/api时，相当于请求target+pathRewrite的内容，即http://localhost:8080/static/mock
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
    },

这里我同时做了两个代理，一个是代理到本地localhost的接口api，一个是代理到需要跨域的服务器上api1。

当我要请求本地接口上的数据的时候，通过api做请求

设置代理后相当于上述路径会被重写为：http://localhost:8080’/static/mock/standard.json

当我需要请求服务器上的接口数据的时候，通过api1做请求

上述路径相当于请求地址：http://b2se29.natappfree.cc/admin/major/list

代理配置注意点

如果配置一个以上的代理，要注意不同代理是以正则匹配的原则进行路径匹配的。

什么意思呢，比如当你同时配置了三个代理分别叫api、api1、api2

那么当你访问/api1/fcgi-bin或访问/api2/dsaf-bin两个地址的时候，实际上请求的都是/api

原因:因为三个代理接口中都包含/api，那么根据正则匹配原则从上往下进行匹配的时候，每当访问/api1或/api2下的路径，都会优先匹配到第一个的/api代理

解决方法:将匹配度高的优先放在前面