我不能使用 json 使用 react 向我的 web api 发出 Post 请求

Posted 2023-02-27

【中文标题】我不能使用 json 使用 react 向我的 web api 发出 Post 请求

【英文标题】：I can't use json to make a Post request to my web api using react

【发布时间】：2019-03-09 21:59:04

【问题描述】：

我在 ASP.NET Core 中创建了一个 webapi，我需要使用 React 来使用它，web api 可以正常工作，如果我使用 curl 或 postman 等，它可以正常工作。当我打算使用 React 时，当我尝试使用问题中的 js 对我的 API 发出任何请求时，问题就开始了。

更复杂的是，当我向其他 API 发出请求时，它正常工作，这让我相信问题出在我的 API 上，但正如我所说，它只能与其他人一起工作，但反应却没有。我已经尝试了很多方法。

API 正在我本地网络上的 IIS 上运行

尝试的方法

使用 Ajax

$ .ajax (
    method: "POST",
    url: 'http://192.168.0.19:5200/api/token',
    beforeSend: function (xhr) 
      xhr.setRequestHeader ("Content-type", "application / json");
    ,
    date: 
      name: 'name',
      password: 'password'
    ,
    success: function (message) 
        console.log (message);
    ,
    error: function (error) 
        / * if (error.responseJSON.modelState)
            showValidationMessages (error.responseJSON.modelState); * /
            console.log (error);
    
  );

使用提取

const headers = new Headers ();
    headers.append ('Content-Type', 'application / json');

    const options = 
      method: 'POST',
      headers,
      body: JSON.stringify (login),
      mode: 'cors' // I tried with cors and no-cors
    

    const request = new Request ('http://192.168.0.19:5200/api/token', options);
    const response = await fetch (request);
    const status = await response.status;
    console.log (response); * /
    // POST adds a random id to the object sent
    fetch ('http://192.168.0.19:5200/api/token', 
    method: 'POST',
    body: JSON.stringify (
      name: 'name',
      password: 'password'
     ),
    headers: 
      "Content-type": "application / json; charset = UTF-8"
    ,
    credentials: 'same-origin'
    )
  .then (response => response.json ())
  .then (json => console.log (json))

使用请求

var request = new XMLHttpRequest ();
    request.open ('POST', 'http://192.168.0.19:5200/api/token', true);
    request.setRequestHeader ('Content-Type', 'application / json; charset = UTF-8');
    request.send (login);

错误

控制台

网络标签

当我在不将内容类型更改为 JSON 的情况下执行此操作时，它可以工作 因为 API 返回说它不是有效类型。

【问题讨论】：

No "Access-Control-Allow-Origin" ... API 中的问题，我的意思是它来自服务器端，而不是客户端

但是当我尝试使用 post man 或 curl 它的工作属性

你应该阅读这个：***.com/questions/36250615/cors-with-postman

我更改了我的 IIS 配置以允许 CORS，但我没有成功，您有什么想法吗？

您还需要允许 OPTIONS 请求。除了 CORS。不确定 .NET，但在 Laravel 中我创建了一个中间件，它向所有选项请求返回 200OK

【参考方案1】：

除了在您的 .NET 配置中允许 CORS。您还需要为所有 OPTION 请求返回 200 OK。

不确定它在 .NET 中是如何完成的，但只是创建一个检测请求的 METHOD 的中间件，如果是 OPTIONS，则在此处以 200 状态完成请求。

【讨论】：

这是正确的，虽然更准确地说，状态码可以是任何 200-209 状态码——它不必只有 200。很多服务器返回 204 表示 OPTIONS。另见***.com/questions/46026409/…

【参考方案2】：

这样试试

 public void ConfigureServices(IServiceCollection services)
  
     services.AddCors();
 

 public void Configure(IApplicationBuilder app, IHostingEnvironment env)
 
        app.UseCors(option => option.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials());

        app.UseAuthentication();
        app.UseMvc();
 

【讨论】：

很不安全，不是吗？

只是试试这段代码是否有效，如果有效，您可以自定义网址

【参考方案3】：

我也遇到了同样的问题，看来您需要将 action 添加到控制器中的 HttpPost 属性中。

这是一个例子。

    [HttpPost("[action]")]
    public void SubmitTransaction([FromBody] SubmitTransactionIn request)
    
        Ok();