I am doing a remote fetch request to a server. The payload is in JSON format, so I want to change the Content-Type
header to application/json
. I have used the following code to do this:
let email = document.getElementById("email").value
let password = document.getElementById("password").value
const body = {"email":email, "password":password}
const headers = new Headers({
"Content-Type": "application/json",
"Content-Length": JSON.stringify(body).length
})
const options = {
method: "POST",
mode: "no-cors",
headers: headers,
body: JSON.stringify(body)
}
console.log(options)
const response = await fetch('http://xx.xx.xx.xxx/login', options)
const json = await response.json()
console.log(json)
However, in the Chrome developer tools console, the Content-Type
header of the request is still text/plain;charset=UTF-8
. What am I doing wrong?
To set the content-type of request header when using Fetch API with JavaScript, we can put the header in a Header object. const options = { method, headers: new Headers({ "content-type": "application/json" }), mode: "no-cors", body: JSON. stringify(body), }; await fetch(url, options);
Supplying request options The fetch() method can optionally accept a second parameter, an init object that allows you to control a number of different settings: See fetch() for the full options available, and more details. Note that mode: "no-cors" only allows a limited set of headers in the request: Accept.
Overriding the Content-Type request header is not allowed for no-cors
requests.
Change the mode to cors
.
(You won't be able to read the response without doing that either).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With