Vue Axios開發環境、生產環境跨域問題解決

一、前置知識

首先要了解幾個Vue-cli的幾個配置引數，另：從 Vue CLI 3.3 起baseUrl已棄用，請使用publicPath

1. publicPath

它是部署你的應用包時的基本URL，默認為 '/'，Vue Cli默認專案是被部署在域名的根路徑下，比如你要把打包生成的檔案部署在https://www.lhch.com下，那么采用默認設定就行，

那如果我們是部署在https://www.lhch.com/test/路徑下呢？那么此時可以：

1. 設定PublicPath為/test/
2. 設定PublicPath為./

第二種設定方法是把PublicPath設定為相對路徑，所有的資源會被連接為相對路徑，這樣打出來的包可以被部署在任意路徑，如果后面又部署到了https://www.lhch.com/test/index下，第二種配置方法依然生效，

publicPath在開發環境也會生效，可以根據不同的環境切換publicPath的值：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/test/' : '/',
  //或者這樣：
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

2. devServer

對于webpack的devServer，Vue Cli的devServer都支持，

比如你要啟用gzips壓縮dist/目錄下的所有內容并提供一個9000本地埠服務：

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

如果前端應用跟后臺API服務器沒有運行在同一臺主機，那就需要在開發環境下將API請求代理到API服務器，此時可以通過devServer.proxy來配置：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:8080'
    }
  }
};

那么此時對/api/users 的請求會將請求代理到 http://localhost:8080/api/users

如果實際的后臺介面不包含 /api,可以重寫路徑：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

pathRewrite里是個正則陳述句，意思是將匹配到的以 /api開頭的字串替換為空，

通俗的講就是：proxy是一種代理，只要遇到含有’/api’的請求，我就去代理這個請求，至于pathRewrite等其他配置項，只是告訴這個代理怎么去代理這些請求

可能很多同學還會有些疑惑，舉個例子：

實際開發中，可能會存在下面的情況：

1. 后端給的所有介面會有一個統一的欄位，比如：https://www.lhch.com/api/users, https://www.lhch.com/api/coustomers
2. 后端給的介面并沒有上面所說的情況，比如 https://www.lhch.com/users, https://www.lhch.com/coustomers

針對第一種情況，porxy里配置 '/api': 'https://www.lhch.com'，當請求 /api/user/的時，就會被代理到https://www.lhch.com/api/user

針對第二種情況，我正常的介面請求里就沒有/api欄位，我又需要代理這些請求，怎么辦呢，那就需要使用pathRewrite將/api替換為空，當請求 /api/user/的時候，本來會被代理到https://www.lhch/api/users, 但是設定pathRewrite: {'^/api' : ''},那么這個請求最終就會被代理到https://www.lhch.com/user

更多詳細的配置內容，你可以點擊查閱下面的官方檔案：

Vue的devServer配置詳情

webpack的devServer配置詳情

修改完組態檔，永遠要記得重跑一下專案，不然你會發現，我屮艸芔茻，我的配置怎么都不起作用？

二、開發環境

開發環境的跨域配置，相信你如果認真看了上面的介紹，已經知道怎么做了，

三、生產環境

首先，請始終明白一個道理，配置devServer不能解決生產環境跨域問題，它解決的是開發環境的跨域問題，

試想一下，專案都開發完成了，也打包了，生成的靜態資源都放入服務器了，需要你一個前端來解決跨域問題嗎？

這個問題后端分分鐘給你解決了，

我目前專案是基于d2-admin，對此，我只需要在.env生產環境組態檔里配置VUE_APP_API就好了，

VUE_APP_API=https://www.lhch.com

為什么配置VUE_APP_API呢，因為專案對于axios進行了一層封裝，其在創建axios實體的時候指定了：baseURL: process.env.VUE_APP_API，其創建axios實體代碼，我貼在下面，

// 創建一個 axios 實體
const service = axios.create({
  baseURL: process.env.VUE_APP_API,
  timeout: 60 * 1000 // 請求超時時間
})

當然對于我個人專案配置這一塊，各位可以當做廢話，省去不看，

什么？后端不配合？

什么？后端不會配置允許跨域？

那你可以‘友好的’把下面代碼展示給他/她看，（基于spring boot）

public WebMvcConfigurer corsConfigurer()
{
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").
                    allowedOrigins("*").
                    allowedMethods("*").
                    allowedHeaders("*").
                    allowCredentials(true).
                    exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L);
        }
    };
}

如果后端實在懶得給你配置允許跨域，

那你可能需要啟動一個nginx服務，并添加一個類似的組態檔nginx.conf：

server {
  ...
  location /api{
    add_header 'Access-Control-Allow-Origin' '*';
    proxy_pass https://www.lhch.com/api;
  }
  ...
}

修改完組態檔記得重啟nginx.

四、小結

其實問題很簡單，奈何有許多像我一樣不愛看官方檔案，恰巧又碰到了這些跨域問題，無奈只能搜索網上這些解決跨域問題的文章，又恰巧碰到大多數博主連生產環境、測驗環境都不分，而寫出的一大堆不知所云的東西，

希望看到此文的你，在弄清楚了某些設定背后的原理的同時，也完美的解決了“跨域”問題，

如果此文幫到了你，你可以隨意贊賞，以示鼓勵，