I can't use json to make a Post request to my web api using react

Question

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.

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.

The API is running on an IIS on my local network

Attempted Ways

Using 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);
    }
  });

Using Fetch

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))

Using Request

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);

ERRORS

Console

Network tab

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.

No "Access-Control-Allow-Origin" ...the problem in your API, I mean it comes server-side, not the client-side — You Nguyen, Oct 04 '18 at 13:28
you should read this: https://stackoverflow.com/questions/36250615/cors-with-postman — You Nguyen, Oct 04 '18 at 13:37
I changed my IIS configuration to allow CORS too and I didn't succeed, Do you have any ideia? — Anderson Henrique, Oct 04 '18 at 13:46
Have you tried this: https://stackoverflow.com/questions/44379560/how-to-enable-cors-in-asp-net-core-webapi — You Nguyen, Oct 04 '18 at 13:49
You also need to allow OPTIONS requests. Apart from CORS. Not sure about .NET, but in Laravel I created a middleware which returns 200OK to all options requests — Borjante, Oct 04 '18 at 13:51
I already allow OPTIONS request on IIS, I'll take a look if I can change anything on the web api code. — Anderson Henrique, Oct 04 '18 at 13:52
@NguyễnThanhTú I had a look on your suggested link, And I added CORS in my web api code too, and now the request returns 204(No content), but It should return anything. — Anderson Henrique, Oct 04 '18 at 13:58
204 (No content) is the response to the OPTIONS request, and it’s a proper response — because the OPTIONS response has no response body — sideshowbarker, Oct 04 '18 at 21:48

score 2 · Answer 1 · answered Oct 04 '18 at 13:52

2

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

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.

answered Oct 04 '18 at 13:52

Borjante

9,767
6
35
61

1

This is correct, though more precisely, the status code can be any 200-209 status code — it doesn’t have to only be 200. A lot of servers return 204 for OPTIONS. See also https://stackoverflow.com/questions/46026409/what-are-proper-status-codes-for-cors-preflight-requests/46028619#46028619 – sideshowbarker Oct 04 '18 at 21:53

score 0 · Answer 2 · edited Jan 23 '20 at 12:58

0

Well I had the same issue and it seems that you need to add the action to the HttpPost attribute in the controller.

Here is an example.

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

edited Jan 23 '20 at 12:58

Dharman

30,962
25
85
135

answered Aug 13 '19 at 23:06

Diego Bascans

1,083
1
6
14

score -1 · Answer 3 · answered Oct 04 '18 at 14:00

-1

Try like this

 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();
 }

answered Oct 04 '18 at 14:00

Nisfan

750
6
10

It is very insecure, is it not? – Anderson Henrique Oct 04 '18 at 14:01
Just to try whether this code is working, If it is working you can able to customize the url – Nisfan Oct 04 '18 at 14:16