跨域是什么
由于瀏覽器的同源策略限制，當一個請求 URL 的協(xié)議、域名、端口和當前頁面 URL 任意一個不一致時都會出現(xiàn)跨域錯誤。
eg：
用node run了一個http://localhost:8080 的服務(wù)，在這個服務(wù)器下訪問的網(wǎng)頁也默認在 http://localhost:8080 這個域下面；
假設(shè)服務(wù)端所在的域是http://example.com
這樣通過ajax發(fā)送請求的話;
由客戶端直接傳過去的就是一個域名為 http://localhost:8080 的請求；
而服務(wù)端所在的域是 http://example.com；
域名不同，請求失敗，出現(xiàn)跨域錯誤
解決跨域可以從兩個方面著手
- 客戶端
- 服務(wù)端
接下來介紹如何在 umi 中使用 proxy 代理處理跨域問題
代理解決跨域的原理
使用代理解決跨域的原理
在客戶端和服務(wù)端之間加了一層中間層
中間層的作用：將不同的域名轉(zhuǎn)換為相同的域名
- 客戶端發(fā)送請求，先經(jīng)過中間層的處理，將域名 http://localhost:8080 轉(zhuǎn)換為 http://example.com
- 利用轉(zhuǎn)換后的域名發(fā)送請求到server
- 服務(wù)端接收到請求的域名 http://example.com，相應(yīng)經(jīng)過中間層的處理，將域名進行轉(zhuǎn)換，發(fā)送響應(yīng)數(shù)據(jù)給客戶端
- client 收到和自己相同的域名，繼續(xù)下一步操作
umi使用proxy代理解決跨域
在config.js配置文件里設(shè)置文章來源：http://www.zghlxwxcb.cn/news/detail-491048.html
proxy: {
"/ci": { // 標識需要進行轉(zhuǎn)換的請求的url
"target": "http://example.com", // 服務(wù)端域名
"changeOrigin": true, // 允許域名進行轉(zhuǎn)換
"pathRewrite": { "^/ci": ''} // 將請求url里的ci去掉
}
}
發(fā)送請求時需要將請求的url設(shè)置為 http://localhost:8080/ci/xx/xx，代理才會對這條請求的域名進行替換。文章來源地址http://www.zghlxwxcb.cn/news/detail-491048.html
到了這里，關(guān)于umi 如何使用 proxy 代理解決 開發(fā)環(huán)境跨域 問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
