CODEWITHSUNDEEP
javascriptjsonreactjsfetch-api
u8y7541
u8y7541

Reputation: 558

Setting Content-Type in fetch request not working

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?

Upvotes: 31

Views: 25109

Answers (1)

Quentin
Quentin

Reputation: 944568

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

Upvotes: 59

Related Questions