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