跨域一直是很煩人問題，不過好現在現在跨域，大部分都是肛后端，后端設置CORS信息即可。

但是也有少部分，可能前端能完成的事前端搞定就行了，懶得麻煩后端，這種情況一般都是進行反代。

使用場景

后端提供了一個在線api地址，但是該地址段和本地localhost不在同一域名下，所以產生了跨域。

配置反代 proxy

這種情況，我們的vue-cli提供了一個很好的功能，反代。

首先我們需要找到vue cli的配置文件：vue.config.js，他存在項目的根目錄，和package.json同級，如果沒有，手動創建即可，只是一個js文件而已。

打開文件填入以下信息：

vue.config.js

這里我講下這段代碼做了什么？

首先，他將https://www.baidu.com這個地址段反代成了本地地址段下的一個連接：

http://localhost:8080/api

這個本地地址段的前段是跟你本地項目地址一樣的，如果端口是8081，那么他也是8081。

此時你會發現他這個http://localhost:8080/api和你的本地項目在同一個域名下，所以跨域問題就不存在了。

那么我們看下他有哪些配置：target 這個就是api地址了，后端給你什么，你就填什么

ws 默認true就行了

changeOrigin 默認true

pathRewrite 這個是重寫路徑，我們著重講下這個

pathRewrite 什么意思？

首先我們要知道反代后，我們的請求地址是誰？

請求地址：http://localhost:8080/api

假設我們的登錄地址api路徑是：/admin/login

那么請求地址就是：http://localhost:8080/api/admin/login

這個地址就對應真實的請求地址：https://www.baidu.com/admin/login

那么我們先比對下沒有反代和反代后的api請求地址段：

無反代：https://www.baidu.com/admin/login

反代：http://localhost:8080/api/admin/login

你會發現除卻域名和端口，反代他多個api地址段，而pathRewrite 的作用就是在反代的時候，發送給真實端口請求時，將api字段去掉。

那么就有人說了，既然是去掉，為什么上面設置的參數為/，而不是''空字符呢。

事實上這兩種都可以，他們的意思是一樣的。所以用誰都可以。

使用體驗

測試反代非常好用，當然他還有很多設置，如果你有需要可以自行搜索引擎搜索查看。

反代會將你的請求完整的發送給真實地址段，并且像頭信息那些，也是原模原樣發送的，所以不用擔心反代后，參數不對了。