Fetch() POST request in reactjs throwing error

Asked Dec 21 '20 at 18:07

Active Jul 31 '23 at 18:10

Viewed 548 times

I am trying to hit and endpoint which returns access token in reactjs using fetch. I am getting the error as:

{ "error": "invalid_request", "error_description": "Missing form parameter: grant_type" }.

Here is my snippet:

const response = await fetch(url,{
        method : 'POST',
        headers: {
          //'Accept': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body : JSON.stringify(
          {
            'grant_type' : 'client_credentials',
            'client_id' : 'my_client_id',
            'client_secret' : 'my_client_secret',
            'scope' : 'openid'
          }
        )
      })

Please suggest where I am doing wrong as in POSTMAN it is working fine with same params as above.

edited Jul 31 '23 at 18:10

Brian Tompsett - 汤莱恩

5,753
72
57
129

asked Dec 21 '20 at 18:07

Mahesh

1,117
2
23
42

1

Your `Content-Type` doesnt match your `body` contents – Abraham Labkovsky Dec 21 '20 at 18:11
@AbrahamLabkovsky I have also tried to pass `'Accept': 'application/json'` in the headers but it is throwing the same error. – Mahesh Dec 21 '20 at 18:12
Why not `'Content-Type': 'application/json'`? – Abraham Labkovsky Dec 21 '20 at 18:14
when I did that it gave error as `{ "error": "RESTEASY003065: Cannot consume content type" }` – Mahesh Dec 21 '20 at 18:15
So you need to convert to urlencoded – Abraham Labkovsky Dec 21 '20 at 18:18
yes, in postman headers section I passed `'Content-Type': 'application/x-www-form-urlencoded'` and it worked fine...am I missing something here? – Mahesh Dec 21 '20 at 18:19
1

https://stackoverflow.com/questions/6566456/how-to-serialize-an-object-into-a-list-of-url-query-parameters/43843090 – Abraham Labkovsky Dec 21 '20 at 18:20
1

You are missing the different formats. `urlencoded` looks different than `json`. You can't simply declare it `urlencoded`. You also have to serialize the data in the correct format – Abraham Labkovsky Dec 21 '20 at 18:21
1

Postman was doing that for you behind the scenes. – Abraham Labkovsky Dec 21 '20 at 18:21
thanks a lot @AbrahamLabkovsky. I have changed as `body:'grant_type=client_credentials&client_id=my_client_id&client_secret=my_client_secret&scope=openid'` and got the access_token now. – Mahesh Dec 21 '20 at 18:24
1

Awesome! Glad to help – Abraham Labkovsky Dec 21 '20 at 18:26

Fetch() POST request in reactjs throwing error

0 Answers0