React跨域詳細闡述

一、React跨域概述

跨域請求，即跨站請求，簡稱CORS。當你的應用程序在從一個域或埠上運行的資源中請求來自另一個域或埠上的資源時，Web瀏覽器會向前其他 Web 伺服器發出 CORS 請求。在React應用程序中突破同源策略，從而能夠訪問來自第三方伺服器的數據。

在React跨域過程中，主要使用的技術有JSONP、CORS、nginx、node.js等，各自的特點、使用場景以及優缺點不盡相同。

二、使用JSONP進行跨域

JSONP是一種主流的跨域解決方案，通過script元素載入一個跨域的js文件，這個js文件剛好是一個回調函數，通過回調函數接收數據，從而突破了瀏覽器同源策略。

    執行步驟如下：
    1.創建一個script標籤，指定一個帶有數據的url，callback參數是回調函數名。
    2.伺服器接收到請求後，將數據封裝到回調函數中，返回jsonp格式的數據。
    3.客戶端瀏覽器解析jsonp數據，執行回調函數，得到數據

以下是JSONP跨域的示例代碼：

    <script>
        function loadScript(url, callback) {
            let script = document.createElement("script");
            script.type = "text/javascript";
            if (script.readyState) { //IE
                script.onreadystatechange = function() {
                    if (script.readyState === "loaded" || script.readyState === "complete") {
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else { //Others
                script.onload = function() {
                    callback();
                };
            }
            script.src = url;
            document.head.appendChild(script);
        }

        function showData(data) {
            console.log(data);
        }
    
        loadScript("http://api.example.com/user?callback=showData");
    </script>

三、使用CORS進行跨域

使用CORS進行跨域請求可以解決大部分瀏覽器的跨域問題，在React中實現CORS跨域請求也非常簡單，只需要在服務端設置相關的頭信息即可。

以下是使用CORS進行跨域的示例代碼：

    fetch("https://api.example.com/user", {
        mode: "cors",
        credentials: "include",
        headers: {
            "Content-type": "application/json; charset=UTF-8",
            "Authorization": "Bearer " + localStorage.getItem('token')
        }
    }).then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error));

四、使用nginx反向代理實現跨域

nginx是一款高性能的HTTP和反向代理伺服器，可以通過反向代理的方式實現跨域請求，其原理是通過Nginx監聽請求，在後端伺服器執行完查詢操作後再將結果返回給前端。

以下是使用nginx實現跨域請求的示例代碼：

    location /api/ {
        proxy_pass http://api.example.com/;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
    }

五、使用Node.js中間件進行跨域請求

Node.js是一款基於事件驅動和非阻塞 I/O 的伺服器端 JavaScript 環境，可以通過編寫中間件實現跨域請求，使用非常方便。

以下是使用Node.js中間件進行跨域請求的示例代碼：

    const express = require('express');
    const cors=require('cors');
    const app = express();
    app.use(cors());
    app.get('/', function (req, res) {
        res.send('Hello World!');
    });
    app.listen(3000, function () {
        console.log('App listening on port 3000!');
    });

六、總結

本文介紹了React中跨域請求的幾種解決方式：JSONP、CORS、nginx反向代理和Node.js中間件。儘管每種方法都有其獨特的優缺點和適用場景，但是我們可以根據具體的應用場景選擇最佳的解決方法。