在react項(xiàng)目中怎么解決跨域問題？解決跨域問題的方法！

在我們的React相關(guān)知識(shí)學(xué)習(xí)中或多或少會(huì)在平時(shí)中聽到跨域問題，那么今天我們就來(lái)深入學(xué)習(xí)一下吧！來(lái)看看有關(guān)于“在react項(xiàng)目中怎么解決跨域問題？”這個(gè)問題的解決方法！下面是小編準(zhǔn)備的一些相關(guān)信息，大家可以作為參考！

因?yàn)槲覀兊臑g覽器遵循同源政策（?scheme?（協(xié)議）、?host?（主機(jī)）、和?port?（端口））都是被稱為同源。有同源就有非同源，那么在非同源中有下面這些限制：不讀取和修改對(duì)方的DOM、不讀取和訪問對(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)簽是沒有跨域限制的，比如 ?script? 和?img?這兩個(gè)就是了。對(duì)于這個(gè)的方法的用法就是通過在網(wǎng)頁(yè)中添加一個(gè)?<script>?,然后在向服務(wù)器請(qǐng)求?json?數(shù)據(jù)，等服務(wù)器收到請(qǐng)求之后，就會(huì)將這個(gè)數(shù)據(jù)放在一個(gè)指定名字通過回調(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

我們可以通過這個(gè)方法在?package.json?文件中使用?proxy?配置就可以解決跨域問題，代碼如下：

"proxy":{
    "/api":{
       "target":"http://xxx.xxx.com",
       "changeOrigin": true,
       "pathRewrite": {
        "^/api": ""
    }
     }
 }

代碼中的target是指接口的域名；?changeorigin?是指開啟代理；對(duì)于?pathRewrite?的話是指：可以看到我使用了/api來(lái)匹配請(qǐng)求接口的域名，而接口名稱是/admin/login，因此在實(shí)際請(qǐng)求中應(yīng)該寫成/api/admin/login，但是我實(shí)際請(qǐng)求的地址又是沒有?api?前綴的，因此需要通過?pathRewrite?重寫地址，將接口請(qǐng)求的時(shí)候前綴去除。

4.Nginx

在上面的方法中可以解決我們很多在開發(fā)中的跨域問題，但是卻無(wú)法解決生產(chǎn)環(huá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ù)器).

這就是今天有關(guān)于“在react項(xiàng)目中怎么解決跨域問題？”這個(gè)問題小編收集的內(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