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)
};

　　

生产阶段

　　情况一：接口有统一的命名

　　在项目打包上线时，代码里的请求地址不需要改动，

　　线上代码运行时，就不会使用代理了，碰到 axios.get('/api/menu') 请求，因为在 api 的前面有个 "/" ，表示根目录的意思，

　　所以 "/api/menu" 会被解析为 hostname+port+"api/menu" ，所以请求地址就为 "www.xxx.com:8080/api/menu"。

　　这里有一个问题，就是这个 api 也在路径中。

　　解决方案就是在设计接口的时候，就把 "api" 也写进接口中，并且为域名后的第一层。也可以自定义命名（比如项目名），然后在开发模式的 proxyTable 里，也设置成这个自定义的命名就好了。

扫描二维码关注公众号，回复： 4166772 查看本文章

　　情况二：接口没有统一的命名

　　还是这个路径 "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)
};