Error 415 when call POST API using Fetch in ReactJS

Question

I want to call an API for register from method in React. Below is my javascript code :

     fetch('http://localhost:5001/api/Account', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            email: "[email protected]",
            name: "Hugh Daniel",
            password: "1234"
        })
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

And this is my controller

    [HttpPost]
    public ResponseModel RegisterByEmail([FromBody]UserModel user)
    {
        return _accountService.RegisterEmail(user);
    }

But I always get these errors

I tried to add mode: 'no-cors' in my javascript code, but it makes Content-Type set to plain. The API is working if I tested it using Postman like this

Did you try to enable CORS on your controller ? Can try with any origin to start with, and then define your origin properly : [EnableCors("", "", "*")] — zer0chain
– zer0chain, Commented Sep 22, 2017 at 3:50
@zer0chain I have tried it. It caused another error 500. It also happen in Postman, it returned error 500 — Intan
– Intan, Commented Sep 22, 2017 at 3:56
Why do you POST to "http://localhost:5001/api/Account" from "http://localhost:3030"? Can you include actual text of error messages at Question? — guest271314
– guest271314, Commented Sep 22, 2017 at 4:02
@guest271314 I created a front end for my apps using React in "http://localhost:3030". And call REST API (created using .Net) in "http://localhost:5001/api/Account" — Intan
– Intan, Commented Sep 22, 2017 at 4:05
The error message appears to be clear, the request is cross origin and the server does not respond with CORS headers. — guest271314
– guest271314, Commented Sep 22, 2017 at 4:07

dhilt · Accepted Answer · 2017-09-22 08:08:35Z

4

You need to combat CORS first of all. You can't make API requests against a different domain:port than the one from which it was served by development server. Are you using Webpack in your project? If yes, the easiest way is to set up API proxy by the Webpack configuration. See the doc. Something like this:

// webpack.config.js
devServer: {
    port: 3030,
    proxy: {
      '/api': {
        target: `http://localhost:5001`,
        secure: false
      }
    }
  }

Now you have to remove host:port from fetch address param and also I would add Accept header to the request settings:

fetch('/api/Account', {
    method: 'post',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    // ...
  }
)

edited Sep 22, 2017 at 8:08

answered Sep 22, 2017 at 5:06

dhilt

21.1k8 gold badges79 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Intan Over a year ago

Yes, the error about CORS is disappeared. But I still got error 415

dhilt Over a year ago

@Intan Try to add Accept header. I've updated the answer.

Intan Over a year ago

still got the same error after I added Accept header

dhilt Over a year ago

@Intan So it's definitely server side issue. Please update your post to provide request/response headers details, like a developers.google.com/web/tools/chrome-devtools/… . And also give us please actual browser console log after the CORS is gone (is it gone?)

dhilt Over a year ago

@Intan I made another one update to clarify the fetch request url param. After you set up proxy for dev server (if you really did it), you need to make api requests from the same host:post as the dev server (3030). In that case you may (even should) not to specify host:port in the address param, just fetch('/api/Account/'...

Дмитрий Пермяков · Accepted Answer · 2021-12-06 20:55:59Z

1

try this

[ApiController]
[Consumes("application/json")]
[Produces("application/json")]
[Route("[controller]")]        
public class TestController : ControllerBase
{}

In js:

await fetch(this.url, { method: 'POST', cache: 'no-cache', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });

Sourse: https://pretagteam.com/question/angular-http-post-formdata-unsupported-media-type-from-c-controller

answered Dec 6, 2021 at 20:55

Дмитрий Пермяков

111 bronze badge

Comments

Vaibhav Mule · Accepted Answer · 2017-09-22 07:59:31Z

-1

Do not use JSON.stringify in the body for sending a request and following code will do the work.

fetch('http://localhost:5001/api/Account', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: {
        email: "[email protected]",
        name: "Hugh Daniel",
        password: "1234"
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

answered Sep 22, 2017 at 7:59

Vaibhav Mule

5,1474 gold badges37 silver badges52 bronze badges

1 Comment

Ruxo Over a year ago

Removing JSON.stringify doesn't automatically convert the object to string. The invalid text [Object object will be passed instead.

Collectives™ on Stack Overflow

Error 415 when call POST API using Fetch in ReactJS

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related