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

问题描述:

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

I created a webapi in ASP.NET Core, and I need to consume it using React, the web api works normally, if I use curl or postman among others, it works normally. The problem starts when I'm going to use React, when I try to make any requests for my API with js from the problem.

更复杂的是,当我请求其他API时,它可以正常工作,这使我相信问题出在我的API中,但是正如我所说的,它只能与其他人一起工作,但不能做出回应.我已经尝试了很多方法.

To complicate matters further, when I make the request for other APIs it works normally, this led me to believe that the problem was in my API, but as I said it works with others only with the react that it does not. I've tried it in many ways.

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

The API is running on an IIS on my local network

$ .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会返回说这不是有效的类型.

When I do this without being change the content type to JSON it works because the API returns saying that it is not a valid type.

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

Apart from allowing CORS in you .NET configuration. You also need to return 200 OK for all OPTION requests.

不确定在.NET中是如何完成的,只是创建一个中间件来检测请求的方法,如果是选项,则以200状态立即完成请求.

Not sure how it's done in .NET but just create a middleware that detects the METHOD of the request, and if it's OPTIONS, the finish the request right there with 200 status.