对外部 API 的 HTTP 请求适用于 .NET，但不适用于 React（CORS 问题）

Posted 2023-02-27

【中文标题】对外部 API 的 HTTP 请求适用于 .NET，但不适用于 React（CORS 问题）

【英文标题】：HTTP Request to external API works with .NET, but not with React (CORS problems)

【发布时间】：2021-10-04 21:23:58

【问题描述】：

我想向外部 API 发出 HTTP Post 请求，但是当我尝试从 React 与 axios 进行时，我遇到了 CORS 错误（请求的资源上不存在“Access-Control-Allow-Origin”标头)。同时在 .NET 中提出这个请求时，一切似乎都很好。我不知道为什么它会这样工作，所以也许有人可以弄清楚。

响应请求：

var bodyFormData = new FormData();
    bodyFormData.append('key', 'apiKey');
    bodyFormData.append('function', 'getTeams');

    async function fetchData() 
        await axios(
            url: 'https://external.api/api/',
            method: 'POST',
            data: bodyFormData,
            withCredentials: true,
            headers: 
                'Content-Type': 'multipart/form-data',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
                'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
            ,
        )
            .then((response) => 
                console.log(response)
            )
            .catch((err) => 
                console.log(err)
            );
    
    fetchData();

.NET 请求：

var request = (HttpWebRequest)WebRequest.Create("https://external.api/api/");

        var postData = "key=apiKey";
        postData += "&function=getTeams";
        var data = Encoding.ASCII.GetBytes(postData);

        request.Method = "POST";
        request.ContentType = "application/x-www-form-urlencoded";
        request.ContentLength = data.Length;

        using (var stream = request.GetRequestStream())
        
            stream.Write(data, 0, data.Length);
        

        var response = (HttpWebResponse)request.GetResponse();

        var responseString = new StreamReader(response.GetResponseStream()).ReadToEnd();

【问题讨论】：

CORS 是一种仅适用于浏览器的安全措施。您的后端代码不受此限制，因为没有浏览器可以强制执行它。

另外，您不能自己发送这些标头 (Access-Control-*)。 API 必须返回它们以表明您可以发送这些请求。

哦，好吧，我可以理解，所以我想，最简单的解决方案是使用 .NET 应用程序作为代理，然后允许 .NET 和 React 应用程序之间的跨域通信？

完全一样

那非常感谢，我会这样弄的。

【参考方案1】：

CORS 是一种仅适用于客户端（浏览器）的安全措施。无论您是否愿意，浏览器都会发送 Origin 标头，API 会检查它以确定它是否应该为您服务（通过允许浏览器继续主请求）。

您可以毫无问题地从后端发送请求，因为没有 Origin 标头可言。

所以你有两个选择：

代理来自后端的 API 调用 请求 API 允许来自应用源 https://$domain:$port 的请求。

如果 API 在您的控制之下，这应该很容易，如果不是，代理是一个更直接的解决方案。

参考

CORS - Is it a client-side thing, a server-side thing, or a transport level thing? https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS