时间戳

首页 > 解决方案 > 对外部 API 的 HTTP 请求适用于 .NET，但不适用于 React（CORS 问题）

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

问题描述

我想向外部 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();

标签： reactjs.nethttppost

解决方案

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

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

所以你有两个选择：

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

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

参考

推荐阅读