对外部 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();
阿布杜斯科

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

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

所以你有两个选择:

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

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

参考

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Spring Security CORS不适用于Http PUT方法

Ionic-HTTP POST请求不适用于本机Android,但适用于Ionic Devapp

intent.getParcelableExtra()适用于API 23,但不适用于API 25

Centos mod_jk适用于http,但不适用于https

C#asp.net核心HTTP POST请求适用于邮递员,但不适用于我的Angular客户端(404错误)

AllowAnyMethod适用于某些API调用,但不适用于其他API调用

Google Analytics API请求适用于失眠/邮递员,但不适用于网络应用

向api发送请求适用于Android,但不适用于IOS。Xamarin

getUserMedia API在React中不适用于iOS Safari

Firebase API问题(适用于Unity)

SQL查询中的问题。适用于MAX,但不适用于MIN

AngularJS:$ http不适用于外部API

PhantomJSDriver适用于HTTP,但不适用于HTTPS

AngularJS查询适用于http,但不适用于资源

PHP中的HTTP请求不适用于特定的API

反向SSH隧道适用于SSH,但不适用于HTTP

使用grunt的请求的代理仅适用于HTTP(不适用于HTTPS)

HTML呈现问题-适用于Mozilla Firefox,但不适用于Google Chrome

CORS Cookie可用于获取请求,但不适用于Angular2中的发布

HTTP Post 适用于 WIFI 但不适用于 Cell

Android:代码适用于 api 19 但不适用于 api 24

RESTful API 请求适用于 Python 和浏览器,但不适用于 VB.Net

React Native Android:请求适用于 android 模拟器,但不适用于 Play Store 构建

React Native HTTPS Api 调用适用于 IOS,但不适用于 Android

HTTP400:GET 请求不适用于 Wildfly 18,但适用于 JBoss 7

API 请求适用于 cURL 但不适用于 Guzzle?

PHP 文件上传适用于 HTTP 表单,但不适用于 Python 脚本

React 外部 CSS 不适用于部分标签

对 TRIAS API 的 POST 请求不适用于请求