Hello Philip,

Can you send us the message that error shows? Generally, 400 error code is thrown when there is invalid syntax(JSON payload) or malformed request body.

In the case of a REST API with a JSON payload, 400's are typically, and correctly I would say, used to indicate that the JSON is invalid in some way according to the API specification for the service.

Related Solution

You need to use mode:"cors" when you are passing Content-type:"application/json"

The no-cors mode only works with some constraint. Covering from mdn docs regarding fetch

Note that mode: "no-cors" only allows a limited set of headers in the request:

I check that you've set request mode to no-cors in fetch options. You can only use mode:no-cors when you pass specific limited set of headers in request as mentioned in that mdn docs.

here's the common options object for fetch API

 method: "post", // *GET, POST, PUT, DELETE, etc.
 mode: "cors", // no-cors, *cors, same-origin
 headers: {
    "Content-Type": "application/json"
 },
 body: JSON.stringify(data) // body data type must match "Content-Type" header

Example

I created a simple app via codesandbox with react client. Created a REST endpoint from my hasura API explorer and used it to insert a sample data. That REST endpoint contains mutation to insert data into db.

Here's the codesandbox link you can test - https://codesandbox.io/s/mystifying-platform-97wdks?file=/src/App.js . You can also access the preview app for that codesandbox here - https://97wdks.csb.app/

Do let us know further if you are experiencing any problems, thanks!