正常操作，正常分析，大家好，我是D1n910。

開新的項目的時候，后端同學(xué)沒有處理跨域的問題，導(dǎo)致本地調(diào)用服務(wù)的時候瀏覽器報送跨域問題，因為用的webpack，所以這邊研究學(xué)習(xí)使用webapck的proxy來解決跨域的問題。

要點

（1）可以根據(jù)需要在本地隨時切換請求不同域名

（2）可以webpack 的proxy代理請求跨域域名，不需要后端處理

* 以下會用 `diff` 的寫法，請注意自行去掉 `+` 和 `-` 哦

Vue項目

步驟一：修改 package.json，添加環(huán)境變量文件

修改文件:?package.json

+ "dev": "vue-cli-service serve --mode development",

+ "dev1": "vue-cli-service serve --mode development1",

其中關(guān)鍵是 mode 后面內(nèi)容，模式自定義。

新建對應(yīng)模式下的`.env`文件，后面帶上對應(yīng) mode 名稱

.env.{} 文件可以存儲自己的各種環(huán)境變量

這里我們對于我們proxy的域名對應(yīng)的環(huán)境變量自定義為 `VUE_APP_API_BASE_URL`

例子：

修改文件:?.env.development1

內(nèi)容：

+ #開發(fā)環(huán)境

+ VUE_APP_API_BASE_URL="http://dev1.nideyuming.com/api"

步驟二：修改 vue.config.js，添加 proxy 配置

module.exports = {

???? devServer: {

???????? host: '0.0.0.0',

???????? disableHostCheck: true,

???????? proxy: {

???????????? '/api': {

???????????? target: process.env.VUE_APP_API_BASE_URL,

???????????? changeOrigin: true,

???????????? pathRewrite: {

???????????????? '^/api': ''

???????????????? }

???????????? }

???????? }

???? }

}

關(guān)鍵就是在 `devServer` 添加了 proxy。

target屬性的值取的是對應(yīng)環(huán)境下的環(huán)境變量。

步驟三：啟動

啟動的時候運行環(huán)境對應(yīng)的腳本命令即可

例子

yarn run dev

yarn run dev1

Nuxt項目

Nuxt項目用不了.env的文件，但是可以直接在啟動命令里配置好環(huán)境變量，然后再獲取。

步驟一：修改 package.json，添加環(huán)境變量

修改文件:?package.json

+ "dev": "BASE_URL=http://dev.nideyuming.com/api/ nuxt dev",

+ "dev1": "BASE_URL=http://dev1.nideyuming.com/api/ nuxt dev",

步驟二：修改 vue.config.js，添加 proxy 配置

前面添加 proxy 變量，方便自定義配置

const proxy = {}

if (process.env.NODE_ENV === 'development') { // 只有在開發(fā)環(huán)境才會執(zhí)行

???? proxy['/api/'] = {

???? target: process.env.BASE_URL,

???? changeOrigin: true,

???? pathRewrite: {

???????? '^/api/': ''

???????? }

???? }

}

在?module.exports?下添加 proxy

module.exports = {

????...

????proxy

????...

}

步驟三：啟動

啟動的時候運行環(huán)境對應(yīng)的腳本命令即可

例子

yarn run dev

yarn run dev1

END