Vue-cli proxyTable 解决开发环境的跨域问题

在前后端分离进行开发时，跨域问题是必然存在的，之前一直使用的谷歌浏览器跨域，最近在使用vue-cli进行开发时，同样遇到了跨域问题，当然设置谷歌浏览器跨域也是可行的，但是vue-cli使用了node等一系列的工具，那合尝不试试新东西呢。

配置代理：

 找到config目录下的index.js文件，文件中有这样一行代码proxyTable: {}，这是作者给开发者留下的空缺，用来配置一些代理规则

  proxyTable: {
        '/api': {
            target: 'http://www.xxx.com', // 你接口的域名
            secure: false,      // 如果是https接口，需要配置这个参数
            changeOrigin: true,     // 如果接口跨域，需要进行这个参数配置
            pathRewrite: {        //重写接口地址
              '^/api': '/'
            }
        }
    }

其中 '/api' 为匹配项，target 为被请求的地址，这样只要接口地址是以"/api/*"开头的，都会走代理接口，但是问题来了，我们项目的接口开头字段不统一，那我们只能手动给每个ajax请求接口前面加上"/api"，如果使用了 axios，可以全局配置一个 baseURL，这样就不用挨个儿修改 url 了

axios.defaults.baseURL = '/api'

此时我们来看看ajax请求变成什么样了

设置代理后的ajax请求

纳尼，404了，因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'

proxyTable: {
        '/api': {
            target: 'http://www.xxx.cn', // 你接口的域名
            secure: false,      // 如果是https接口，需要配置这个参数
            changeOrigin: true,     // 如果接口跨域，需要进行这个参数配置
            pathRewrite: {        //重写接口地址
              '^/api': '/'
            }
        }
    }

我们再来看看网络请求

重写地址后的请求

可以看到接口200了，虽然我们加了前缀，但是真实的请求是没有前缀的。

写这篇文章只是记录下自己的学习记录，始终坚信一句话，我们都是站在巨人的肩膀上作代码的搬运工，没有什么不可能。