vue 开发和生产的跨域问题

开发阶段

　　在开发环境与后端调试的时候难免会遇到跨域问题，在 vue 项目中常用的是 proxyTable，这个用起来很方便。

　　打开 config 文件夹下面的 index.js，找到 dev 开发模式的 proxyTable，添加以下代码即可：

        proxyTable: {
            '/api': {
                target: 'http://xxx.xxx.xxx/', // 开发阶段，接口的域名
                changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
　　　　　　　　　 secure: true, // 如果是https接口，需要配置这个参数
                pathRewrite: { // 路径重写，
                    '^/api': '/api' // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api/XXXXX即可。
                }
            }
        },

　　在需要调用的接口前加上 "/api" 即可

const menu = (params) => {
  return axios.get("/api/menu",params).then(res => res.data)
};

　　上述方法在开发阶段是没问题的，但是上线的时候，换成正式服务器，就不行了，因为路径中出现了 api 字符，并且生产和开发模式的域名可能不一致。

生产阶段

　　上线的时候，路径 "www.xxx.com:8080/api/menu" 中的 api ，如果真实接口中没有 api 这一层，路径就会报错。真实接口是 "www.xxx.com:8080/menu"

　　解决方案：分别区分两种模式，然后拼接接口，具体如下。

const rootUrl = process.env.NODE_ENV === 'development' ? '/api' : '';

const menu = (params) => {
    return axios.get(rootUrl + '/menu', params).then(res => res.data)
};

　　上述方法可以实现开发和生产模式代码不用更改路径，但是没解决两种模式域名不一致的情况。

　　还可以分别在 /config/dev.env.js 和 /config/prod.env.js 中分别设置 API_ROOT，然后取出再做接口的拼接。

//config/dev.env.js文件中
module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    API_ROOT: '"/api"'
})

//config/prod.env.js文件中
//生产阶段单独设置域名
module.exports = {
    NODE_ENV: '"production"',
    API_ROOT: '"http://baidu.xxx.com/"'
}

//在接口调用的时候拼接
const rootUrl = process.env.API_ROOT;

const menu = (params) => {
    return axios.get(rootUrl + '/menu', params).then(res => res.data)
};

　　上述方法很好的解决了两种模式下路径中的 api 字符替换问题，并且域名也可以单独设置。