PUT 请求正文为 application/json 而不是纯文本/文本

Question

I'm messing around with react and trying to make a put request to an api. I'm trying to send my body as content-type application/json but it keeps sending as text/plain. If I add the header "Content-Type" : "application/json" I just get this as the return.

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

I'm using this api : http://funtranslations.com/api/yoda

Here is my request:

fetch('http://api.funtranslations.com/translate/yoda.json', { method: 'PUT', body: JSON.stringify({ text: this.state.input }) })
.then(res => { return console.log(res.json()); }) }

Thank you in advance for attempting to help me :)

Answer 1

I think you are sending data in wrong content-type. According to funtranslation web site content-type should be application/x-www-form-url-encoded

fetch('http://api.funtranslations.com/translate/yoda.json', {
  method: 'PUT',
  headers: {'Content-Type': 'application/x-www-form-url-encoded', 'Accept': 'application/json'},
  body:"text=hadi"
})
.then(res => {
    return console.log(res.json());
})

This address is clearly explaining CORS issue

For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.

I love this picture to see what is CORS: