vue項(xiàng)目配置代理如何解決跨域問(wèn)題

更新時(shí)間：2023年01月23日 11:59:51 作者：The..Fuir

這篇文章主要介紹了vue項(xiàng)目配置代理如何解決跨域問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue項(xiàng)目配置代理

前端向服務(wù)器發(fā)送請(qǐng)求時(shí)，經(jīng)常會(huì)遇到跨域問(wèn)題，那么什么是前端跨域呢？

在vue項(xiàng)目中如何利用代理解決呢？

1. 這里以axios發(fā)請(qǐng)求為例

axios.get("/abc/def");
axios.get("/abc/ghi");
axios.post("/abc/jkm");

axios發(fā)送的請(qǐng)求是本地的服務(wù)器地址拼接上發(fā)送的請(qǐng)求，如 http://localhost:8080/abc/def

2. 如果發(fā)送的請(qǐng)求都以 /abc 開(kāi)頭

那么我們就可以在proxy中進(jìn)行服務(wù)器代理配置。

devServer: {
? ? proxy: {
? ? ? "/abc": {
? ? ? ? target: "http://XX.XX.XX.XX:8081",
? ? ? ? changeOrigin: true,
? ? ? ? ws: true,
? ? ? ? secure: false,
? ? ? },
? ? },
},

"/abc":{} : 引號(hào)中代表監(jiān)測(cè)的是以 /abc 開(kāi)頭的接口

target : 代表監(jiān)測(cè)到以 /abc 開(kāi)頭的接口后，把a(bǔ)xios請(qǐng)求中前面的本地服務(wù)器地址改為后端接口地址，實(shí)際發(fā)送給后端的請(qǐng)求就是下方后一個(gè)請(qǐng)求

http://localhost:8080/abc/def --> http://XX.XX.XX.XX:8081/abc/def

changeOrigin : 是否跨域
ws : 如果要代理 websockets，配置這個(gè)參數(shù)
secure : 如果是https接口，需要配置這個(gè)參數(shù)（如果是http接口，也可以不寫(xiě)這個(gè)參數(shù)）
pathRewrite ：替換請(qǐng)求中匹配的內(nèi)容。在3的方法2中詳細(xì)解釋用法，上方未使用此參數(shù)

3. 代理多個(gè)接口

http://localhost:8080/zzz/one

http://localhost:8080/xxx/two

方法1：監(jiān)測(cè)多個(gè)接口，可以在proxy中寫(xiě)多個(gè)配置：（適用于target不同的代理，相同也可以用這個(gè)方法，就是會(huì)麻煩一點(diǎn)，對(duì)于相同的target方法2會(huì)比較方便）

devServer: {
? ? proxy: {
? ? ? ? "/zzz": {
? ? ? ? ? target: "http://XX.XX.XX.XX:8082",
? ? ? ? ? changeOrigin: true,
? ? ? ? ? ws: true,
? ? ? ? },
? ? ? ? "/xxx": {
? ? ? ? ? target: "http://XX.XX.XX.XX:8083",
? ? ? ? ? changeOrigin: true,
? ? ? ? ? ws: true,
? ? ? ? },
? ? },
},

那么實(shí)際發(fā)送給后端的請(qǐng)求就是：

http://XX.XX.XX.XX:8082/zzz/one

http://XX.XX.XX.XX:8083/xxx/two

方法2：使用axios進(jìn)行前設(shè)置（適用于target相同的代理）

// 一般在全局設(shè)置里引入，例如main.js，方便第二行的配置被每一個(gè)axios請(qǐng)求識(shí)別
import axios from "axios";
// 只要發(fā)送axios請(qǐng)求，就在請(qǐng)求前加入/api的開(kāi)頭，例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api"; ? ?

進(jìn)行了上方的配置后，在本地發(fā)送的請(qǐng)求會(huì)變?yōu)?/p>

http://localhost:8080/api/zzz/one

http://localhost:8080/api/xxx/two

而后可以設(shè)置只監(jiān)聽(tīng) "/api" 的代理，不過(guò)要設(shè)置pathRewrite參數(shù)：

devServer: {
? ? proxy: {
? ? ? ? "/api": {
? ? ? ? ? ? target: "http://XX.XX.XX.XX:8084",
? ? ? ? ? ? changeOrigin: true,
? ? ? ? ? ? ws: true,
? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? "^/api": "",
? ? ? ? ? ? },
? ? ? ? },
? ? },
},

pathRewrite ：檢查代理的請(qǐng)求中是否有 /api ，有的話把 /api 替換為冒號(hào)后面的內(nèi)容，案例為替換成空字符串，也就是刪去 /api 。（^是正則表達(dá)式的內(nèi)容，意思是限定開(kāi)頭）

本地請(qǐng)求 http://localhost:8080/api/zzz/one ->
代理后請(qǐng)求 http://XX.XX.XX.XX:8084/api/zzz/one ->
設(shè)置pathRewrite后的請(qǐng)求 http://XX.XX.XX.XX:8084/zzz/one
所以代理完成后真正發(fā)送給后端的請(qǐng)求就是 http://XX.XX.XX.XX:8084/zzz/one 啦。

1.統(tǒng)一給請(qǐng)求添加/api方便監(jiān)測(cè)代理 2.統(tǒng)一刪去/api發(fā)送正確的請(qǐng)求）

注意：小伙伴們可能會(huì)看到瀏覽器中右鍵檢查打開(kāi)的控制臺(tái)中，網(wǎng)絡(luò)->標(biāo)頭->常規(guī)，中的請(qǐng)求網(wǎng)址顯示的還是 http://XX.XX.XX.XX:8084/api/zzz/one 。
這是因?yàn)闉g覽器的同源策略，經(jīng)過(guò)代理設(shè)置的請(qǐng)求發(fā)送給后端已經(jīng)變成 http://XX.XX.XX.XX:8084/zzz/one 沒(méi)有/api 的形式了，不用被瀏覽器顯示的請(qǐng)求網(wǎng)址干擾。
如果實(shí)在不想看到瀏覽器的請(qǐng)求網(wǎng)址中有api，可以采用方法1。

什么是跨域？

JavaScript同源策略：當(dāng)協(xié)議、子域名、主域名、端口號(hào)中任意一個(gè)不相同時(shí)，都算作不同域。

不同域之間相互請(qǐng)求資源，就算作“跨域”。

同源策略要求源相同才能正常進(jìn)行通信，即協(xié)議、域名、端口號(hào)都完全一致。**同源策略限制：**表單提交、AJAX請(qǐng)求等。

注意：跨域并不是請(qǐng)求發(fā)不出去，請(qǐng)求能發(fā)出去，服務(wù)端能收到請(qǐng)求并正常返回結(jié)果，只是結(jié)果被瀏覽器攔截了。

proxy代理解決跨域

**原理：**瀏覽器是禁止跨域的，但是服務(wù)端不禁止，在本地運(yùn)行npm run serve等命令時(shí)實(shí)際上是用node運(yùn)行了一個(gè)服務(wù)器，因此proxyTable實(shí)際上是將請(qǐng)求發(fā)給自己的服務(wù)器，再由服務(wù)器轉(zhuǎn)發(fā)給后臺(tái)服務(wù)器，做了一層代理，因此不會(huì)出現(xiàn)跨域問(wèn)題。

當(dāng)我們?cè)谟帽緳C(jī)去找服務(wù)器要數(shù)據(jù)時(shí)會(huì)產(chǎn)生跨域問(wèn)題，所以利用vue-cli去開(kāi)啟一個(gè)代理服務(wù)器。

配置（vue.config.js）

方法一

優(yōu)點(diǎn)：配置簡(jiǎn)單、請(qǐng)求資源時(shí)直接發(fā)給前端（8080）即可

缺點(diǎn)：不能配置多個(gè)代理，不能靈活的控制請(qǐng)求是否走代理

當(dāng)請(qǐng)求了前端不存在的資源時(shí)，該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器(優(yōu)先匹配前端資源)

?module.exports = {
? ? ?devServer: {
? ? ? ? ? ? ?proxy: 'http://localhost:5000',
? ? ?}
?}

方法二

優(yōu)點(diǎn)：可以配置多個(gè)代理，且可以靈活的控制請(qǐng)求是否走請(qǐng)求

缺點(diǎn)：配置繁瑣，請(qǐng)求資源時(shí)必須加前綴

//開(kāi)啟代理服務(wù)器(方法二)
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? // ?'/yu'為請(qǐng)求前綴，用于控制是不是走代理，想走代理時(shí)就在請(qǐng)求前綴前邊加上這個(gè)請(qǐng)求前綴
? ? ? ? ? ? '/yu': {
? ? ? ? ? ? ? ? target: 'http://localhost:5000',
? ? ? ? ? ? ? ? pathRewrite: { "^/yu": "" }, //重寫(xiě)路徑 ?匹配以/yu為開(kāi)頭的路徑都變?yōu)榭兆址?
? ? ? ? ? ? ? ? ws: true, //用于支持websocket
? ? ? ? ? ? ? ? changeOrigin: true //用于控制請(qǐng)求頭中的host值
? ? ? ? ? ? },
? ? ? ? ? ? '/demo': {
? ? ? ? ? ? ? ? target: 'http://localhost:5001',
? ? ? ? ? ? ? ? pathRewrite: { "^/demo": "" },
? ? ? ? ? ? ? ? ws: true, //用于支持websocket
? ? ? ? ? ? ? ? changeOrigin: true //用于控制請(qǐng)求頭中的host值
? ? ? ? ? ? },
? ? ? ? }
? ? }

請(qǐng)求時(shí)：

請(qǐng)求前綴必須跟著端口號(hào)

getStudents() {
? ? ? axios.get("http://localhost:8081/yu/students").then(
? ? ? ? (response) => {
? ? ? ? ? console.log("請(qǐng)求成功了", response.data);
? ? ? ? },
? ? ? ? (error) => {
? ? ? ? ? console.log("請(qǐng)求失敗了", error.message);
? ? ? ? }
? ? ? );
? ? },
? ? getCars() {
? ? ? axios.get("http://localhost:8081/demo/cars").then(
? ? ? ? (response) => {
? ? ? ? ? console.log("請(qǐng)求成功了", response.data);
? ? ? ? },
? ? ? ? (error) => {
? ? ? ? ? console.log("請(qǐng)求失敗了", error.message);
? ? ? ? }
? ? ? );
? ? },

1.vue-cli 2 是在路徑為config/index.js的文件下proxyTable里配置的，該文件是整個(gè)項(xiàng)目的主要配置入口

// node自帶路徑工具.
var path = require('path')
// 分為兩種環(huán)境，dev和production
module.exports = {
? dev: {
? ? // 配置好后一定要關(guān)閉原來(lái)的server，重新npm run dev啟動(dòng)項(xiàng)目。不然無(wú)效。
? ? proxyTable: { ? // 需要代理的接口，可以跨域
? ? ? // 用‘/api'開(kāi)頭，代理所有請(qǐng)求到目標(biāo)服務(wù)器
? ? ? '/api': {
? ? ? ? ? ? target: 'http:xxx.com', // 目標(biāo)接口域名
? ? ? ? ? ? changeOrigin: true, // 是否啟用跨域
? ? ? ? ? ? pathRewrite: { //這里要理解成用'/api'代替target里面的地址，后面的組件中我們調(diào)用接口的時(shí)候直接用api代替，比如我要調(diào)用'http://40.00.100:3002/user/add'，直接寫(xiě)成'/api/user/add'即可
? ? ? ? ? ? ? '^/api': '' ?// 即/api相當(dāng)于http://40.00.100:3002
? ? ? ? ? ? }
? ? ? ? }
? ? ?}
? }
}

注意：‘/api’ 為匹配項(xiàng)，因?yàn)樵?ajax 的 url 中加了前綴 ‘/api’，而原本的接口是沒(méi)有這個(gè)前綴的，所以需要通過(guò) pathRewrite 來(lái)重寫(xiě)地址，將前綴 ‘/api’ 轉(zhuǎn)為 ‘/’。

如果本身的接口地址就有 ‘/api’ 這種通用前綴，就可以把 pathRewrite 刪掉。

2.vue-cli 3 是自己在根目錄下新建vue.config.js文件，在devServer.proxy對(duì)象里配置（當(dāng)然也有其他方式），配置后會(huì)和隱藏的配置自動(dòng)進(jìn)行整合

module.exports = {
? ? // cli3 代理是從指定的target后面開(kāi)始匹配的，不是任意位置；配置pathRewrite可以做替換
? ? devServer: {
? ? ? proxy: {
? ? ? ? '/yourapi': { ? //代理api，/yourapi的意義在于，聲明axios中url已/api開(kāi)頭的請(qǐng)求都適用于該規(guī)則，注意是以/yourapi開(kāi)頭，即：axios.post({url: '/yourapi/xxx/xxx'})
? ? ? ? ? target: 'yourserver', ? //服務(wù)器真實(shí)api地址，即需要請(qǐng)求的目標(biāo)接口，此處target的意義在于：造成跨域是因?yàn)樵L問(wèn)的host與我們的請(qǐng)求頭里的origin不一致，所以我們要設(shè)置成一致，這個(gè)具體請(qǐng)看下文
? ? ? ? ? changeOrigin: true, ? ?//是否跨域，true為開(kāi)啟代理：在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問(wèn)題
? ? ? ? ? ws: true, // 是否啟用websockets，根據(jù)實(shí)際情況看是否需要配置該項(xiàng)
? ? ? ? ? pathRewrite: {?
? ? ? ? ? ? ? ?'^/yourapi': 'https://我是服務(wù)器/api' ? //重寫(xiě)路徑
? ? ? ? // 此處是大部分文章都不會(huì)明說(shuō)的的地方，
? ? ? ? // 既然我們?cè)O(shè)置了代理，則所有請(qǐng)求url都已寫(xiě)成/yourapi/xxx/xxx，那請(qǐng)求如何知道我們到底請(qǐng)求的是哪個(gè)服務(wù)器的數(shù)據(jù)呢
? ? ? ? // 因此這里的意義在于， 以 /yourapi開(kāi)頭的url請(qǐng)求，代理都會(huì)知道實(shí)際上應(yīng)該請(qǐng)求那里，
? ? ? ? // ‘我是服務(wù)器/yourapi'，后面的/api根據(jù)實(shí)際請(qǐng)求地址決定，即我的請(qǐng)求url：/yourapi/test/test，被代理后請(qǐng)求的則是
? ? ? ? // https://我是服務(wù)器/yourapi/test/test
? ? ? ? ? }?
? ? ? ? }
? ? ? }
? ? }
? }