vue-cli本地環境API代理設定和解決跨域
前言
我們在使用vue-cli啟動專案的時候npm run dev
便可以啟動我們的專案了,通常我們的請求地址是以localhost:8080來請求介面資料的,localhost是沒有辦法設定cookie的。
我們可以在vue-cli配置檔案裡面設定一個代理,跨域的方法有很多,通常需要後臺來進行配置。我們可以直接通過node.js代理伺服器來實現跨域請求。
vue proxyTable介面跨域請求除錯
在vue-cli專案中的config
資料夾下的index.js
配置檔案中,dev
長這樣子:
dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, cssSourceMap: false }
伺服器提供的介面如果長這樣https://www.exaple.com/server_new/login
,我們把域名提取出來如https://www.exaple.com
;
在config中新建一個檔案命名為proxyConfig.js
:
module.exports = { proxy: { '/apis': { //將www.exaple.com印射為/apis target: 'https://www.exaple.com', // 介面域名 secure: false, // 如果是https介面,需要配置這個引數 changeOrigin: true, //是否跨域 pathRewrite: { '^/apis': '' //需要rewrite的, } } } }
如果本身的介面地址就有 '/api' 這種通用字首,也就是說https://www.exaple.com/api
,就可以把 pathRewrite
刪掉。
config
資料夾下的index.js
引入proxyConfig.js
:
var proxyConfig = require('./proxyConfig')
config
資料夾下的index.js
中的dev
改成:
dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: proxyConfig.proxy, cssSourceMap: false }
重啟專案npm run dev
:
你會發現出現了這個
這個時候我們已經設定好了本地API代理了
修改本地hosts
檔案
window
檔案路徑一般是C:\Window\System32\drivers\etc
,mac
則直接前往資料夾/etc/hosts
,開啟hosts
檔案,在這一段下面把localhost
設定進去
# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
127.0.0.1 activate.adobe.com
127.0.0.1 practivate.adobe.com
127.0.0.1 lmlicenses.wip4.adobe.com
127.0.0.1 lm.licenses.adobe.com
127.0.0.1 na1r.services.adobe.com
127.0.0.1 hlrcv.stage.adobe.com
localhost www.exaple.com
搞定
此時我們已經完全解決了跨域問題,以及本地測試後臺無法向我們本地環境設定cookie
的情況了。
補充
這個文章釋出很久了,很多人私信我問我開發地址是什麼,上線地址是什麼。
在這裡進行一下補充,教大家一個一勞永逸的方法;
寫一個config.js
檔案,作為專案地址的配置。
如下:
//專案域名地址
const url = 'https://exaple.com';
let ROOT;
//由於封裝的axios請求中,會將ROOT打包進去,為了方便之後不再更改,判斷了當前環境,而生成的不同的ROOT
if (process.env.NODE_ENV === 'development') {
//開發環境下的代理地址,解決本地跨域跨域,配置在config目錄下的index.js dev.proxyTable中
ROOT = "/apis"
} else {
//生產環境下的地址
ROOT = url;
}
exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;
這裡暴露出去了兩個介面,一個作為代理指向地址,也就是真正的請求地址,一個則為我們的ajax
請求的地址。
我們將ROOT
引入我們配置的ajax
中,再將proxyConfig.js
修改如下:
const config = require("../src/fetch/config"); //路徑你們改下
module.exports = {
proxy: {
[config.ROOT]: { //將www.exaple.com印射為/apis
target: config.PROXYROOT,, // 介面域名
secure: false, // 如果是https介面,需要配置這個引數
changeOrigin: true, //是否跨域
pathRewrite: {
[`^${config.ROOT}`]: '' //需要rewrite的
}
}
}
}
之後不管是生產環境,還是開發環境,都不用再修改我們的請求地址了。
寫的比較潦草,沒有整理思路,總結一下。
也就是說,之前我們的方法,在npm run dev
的時候,ajax
請求介面地址需要帶上/apis
,而如果我們在npm run build
的時候,則需要將ajax
介面地址改為真正的地址www.exaple.com
,這樣極其不方便,每次都要改。那我們便通過process.env.NODE_ENV
來判斷環境,從而匯出不一樣的介面。