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 字符替換問題，並且域名也可以單獨設置。