跨域-問題出現(xiàn)切換請求基地址到本地服務(wù)器

直接修改 env.development.js 中的配置即可??例：

修改開發(fā)環(huán)境變量的值

如果你本地沒有服務(wù)器，可以把 localhost 改成 有本地服務(wù)器的人的IP地址，從而訪問別人的服務(wù)器。

①啟動mongodb服務(wù)

一般在安裝后，它會常駐服務(wù)，我們不用管它

安裝步驟可以查閱相關(guān)資料，如果運(yùn)行失敗就要去設(shè)置一下環(huán)境變量

搜索電腦中的環(huán)境變量，選擇Path這一項

添加環(huán)境變量 （\MongoDB\Server\4.2\bin ）要把路徑寫對

②啟動后端服務(wù)器??

在后端服務(wù)器文件夾，運(yùn)行 npm run start

③測試服務(wù)器

在login頁面上，點(diǎn)擊登陸，查看后端的服務(wù)器的反應(yīng)：后端能收到請求，但是前端網(wǎng)頁上出現(xiàn)了跨域錯誤；

后續(xù)開發(fā)以本地接口為準(zhǔn)，開發(fā)時要保證people下的服務(wù)器要啟動；

注意：跨域錯誤本質(zhì)問題出在瀏覽器，而不是服務(wù)器端，服務(wù)器是可以順利收到請求的

跨域-原因及解決方案

出現(xiàn)條件

（請求是跨域的，并不一定會報錯。普通的圖片請求，css文件請求是不會報錯的）

跨域請求出現(xiàn)錯誤的條件： 瀏覽器同源策略 && 請求是ajax類型

解決方案

1.前端用JSONP方式去發(fā)請求（jsonp不是ajax請求）

2.后端寫代碼(CORS)在響應(yīng)中添加必要的響應(yīng)頭，讓響應(yīng)回來之后瀏覽器不報錯

3.代理轉(zhuǎn)發(fā)

代理轉(zhuǎn)發(fā)原理

跨域-Vue-Cli配置代理轉(zhuǎn)發(fā)

通過配置vue-cli請求代理解決開發(fā)環(huán)境下的跨域問題

構(gòu)思圖解

思路：

在前端服務(wù)和后端接口服務(wù)之間 架設(shè)一個中間代理服務(wù)，它的地址保持和前端服務(wù)一致，那么：

1.代理服務(wù)和前端服務(wù)之間由于協(xié)議域名端口三者統(tǒng)一不存在跨域問題，可以直接發(fā)送請求

2.代理服務(wù)和后端服務(wù)之間由于并不經(jīng)過瀏覽器沒有同源策略的限制，可以直接發(fā)送請求

vue-cli解決跨域配置說明

在vue.config.js配置文件中，有一項是devServer，它就是我們下邊要操作的主角。

實(shí)例代碼

?基地址? .env.development

開發(fā)環(huán)境下的基地址環(huán)境變量只留'/api'

api接口

在封裝接口時，url地址都可以將‘/api’省略

登錄接口修改

重啟項目，驗證結(jié)果

修改了配置文件，重啟前端項目，再次測試接口

?小結(jié)：

1.vue-cli集成了跨域代理功能------ 只能用在開發(fā)階段。

2.vue.config.js文件中，在devServe下按指定格式配置了proxy，再重啟項目即可。

特別強(qiáng)調(diào)：

ajax的基地址baseUrl必須是相對地址，而不能是絕對地址