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