在react項目中怎么解決跨域問題？解決跨域問題的方法！

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

因為我們的瀏覽器遵循同源政策（?scheme?（協(xié)議）、?host?（主機）、和?port?（端口））都是被稱為同源。有同源就有非同源，那么在非同源中有下面這些限制：不讀取和修改對方的DOM、不讀取和訪問對方的?Cookie? ，?IndexDB? 和 ?LocalStorage?、限制?XMLHttpRequest?請求。而且當(dāng)瀏覽器向目標路徑發(fā)送Ajax請求的時候，只要我們當(dāng)前的路徑和目標路徑不同源，則會產(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ù)器).

這就是今天有關(guān)于“在react項目中怎么解決跨域問題？”這個問題小編收集的內(nèi)容，當(dāng)然如果你有更好的方法可提出來和大家探討學(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