在我們的React相關(guān)知識學(xué)習(xí)中或多或少會在平時中聽到跨域問題,那么今天我們就來深入學(xué)習(xí)一下吧!來看看有關(guān)于“在react項目中怎么解決跨域問題?”這個問題的解決方法!下面是小編準備的一些相關(guān)信息,大家可以作為參考!
一.為什么會出現(xiàn)跨域?
因為我們的瀏覽器遵循同源政策(?scheme
?(協(xié)議)、?host
?(主機)、和?port
?(端口))都是被稱為同源。有同源就有非同源,那么在非同源中有下面這些限制:不讀取和修改對方的DOM、不讀取和訪問對方的?Cookie
? ,?IndexDB
? 和 ?LocalStorage
?、限制?XMLHttpRequest
?請求。而且當瀏覽器向目標路徑發(fā)送Ajax請求的時候,只要我們當前的路徑和目標路徑不同源,則會產(chǎn)生跨域,也被稱為跨域請求。
二.解決方法
1.JSONP
jsonp是指服務(wù)器與客戶端跨源通信常用的方法,擁有簡單適用、兼容性好的特點,但是它有一個缺點就是只支持get請求不支持post請求。然而在?HTML
?的標簽中有一些標簽是沒有跨域限制的,比如 ?script
? 和?img
?這兩個就是了。對于這個的方法的用法就是通過在網(wǎng)頁中添加一個?<script>
?,然后在向服務(wù)器請求?json
?數(shù)據(jù),等服務(wù)器收到請求之后,就會將這個數(shù)據(jù)放在一個指定名字通過回調(diào)函數(shù)的參數(shù)位置傳回來。
2.CORS
在這個方法中擁有普通跨域請求和帶?cookie
?跨域請求。在普通跨域請求中:我們只需要在服務(wù)端設(shè)置?Access-Control-Allow-Origin
?
,然而在帶cookie跨域請求中:前后端都需要進行設(shè)置(前端設(shè)置:根據(jù)?xhr.withCredentials
?字段判斷是否帶有?cookie
?)。
3.proxy
我們可以通過這個方法在?package.json
?文件中使用?proxy
?配置就可以解決跨域問題,代碼如下:
"proxy":{
"/api":{
"target":"http://xxx.xxx.com",
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
代碼中的target是指接口的域名;?changeorigin
?是指開啟代理;對于?pathRewrite
?的話是指:可以看到我使用了/api
來匹配請求接口的域名,而接口名稱是/admin/login
,因此在實際請求中應(yīng)該寫成/api/admin/login
,但是我實際請求的地址又是沒有?api
?前綴的,因此需要通過?pathRewrite
?重寫地址,將接口請求的時候前綴去除。
4.Nginx
在上面的方法中可以解決我們很多在開發(fā)中的跨域問題,但是卻無法解決生產(chǎn)環(huán)境上的跨域問題。這個方法的功能有這么幾種:http服務(wù)器(可以獨立提供http服務(wù))、虛擬主機(可以多個域名指向同一個服務(wù)器,而且服務(wù)器根據(jù)不同的域名把請求轉(zhuǎn)發(fā)到不同的應(yīng)用服務(wù)器)、方向代理(負載均衡,將請求轉(zhuǎn)發(fā)至不同的服務(wù)器).
總結(jié):
這就是今天有關(guān)于“在react項目中怎么解決跨域問題?”這個問題小編收集的內(nèi)容,當然如果你有更好的方法可提出來和大家探討學(xué)習(xí),更多有關(guān)于react這方面的內(nèi)容我們都可以在React 教程中進行學(xué)習(xí)和了解。
參考資料:
JSONP與CORS相關(guān)內(nèi)容文章鏈接:https://blog.csdn.net/qq_38128179/article/details/84956552
Mac安裝nginx注意事項和流程鏈接:https://www.cnblogs.com/yy136/p/12690225.html