react項目中如何解決跨域問題

這篇文章主要介紹“react項目中如何解決跨域問題”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“react項目中如何解決跨域問題”文章能幫助大家解決問題。

一.為什么會出現跨域？

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

在上面的方法中可以解決我們很多在開發中的跨域問題，但是卻無法解決生產環境上的跨域問題。這個方法的功能有這么幾種：http服務器（可以獨立提供http服務）、虛擬主機（可以多個域名指向同一個服務器，而且服務器根據不同的域名把請求轉發到不同的應用服務器）、方向代理(負載均衡，將請求轉發至不同的服務器).

關于“react項目中如何解決跨域問題”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。