为什么 header 中的内容类型仍然是 text/plain 虽然我将其设置为 application/json

Question

I use fetch() to post json data as below

var data = {
            name: this.state.name,
            password: this.state.password
        }
fetch('http://localhost:3001/register/paitent', {
            method: 'POST',
            body: JSON.stringify(data), 
            mode: 'no-cors',
            headers: new Headers({
                'Content-Type': 'application/json'
            })
        })
        .then(res => res.json())

I always get {} in request.body in my express server router, and I figure out the problem is in sending request, it's always 'text/plain'. Why this happens?

Answer 1

You set the mode to no-cors .

Setting the Content-Type to application/json requires permission from CORS…

The only allowed values for the Content-Type header [without triggering a preflight CORS request] are:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

— mdn

…which you told fetch not to ask for. Since you don't ask for permission, you don't get permission, so fetch reverts to text/plain .

Answer 2

I was stuck on same issue for hours now figure out exact solution for this as mentioned in documentation of expressjs @Quentin has pointed towards exact issue. here i am posting some more details may it will help someone else to resolve issue quickly.

When you are posting json object with 'Content-Type':'application/json' fetch or any other method browser will request for cors setting first for security reason then if it receives cors options which is very easy to achieve. then it will post original object to server as nodejs server is waiting for 'Content-Type':'application/json'

you can check documention of cors setting on expressjs.com

you need to just install cors package and add this line in your file

app.options("/data",cors());

this will setup preflight cors response for your browser for specific path /data then your method will look like this 'app.post('/data',cors(),function(req,res){}'

Now you can post data with 'Content-Type':'application/json'

i will recommend to read cors article on MDN for better understanding