将请求正文作为 application/json 而不是纯文本/文本答案

【问题标题】：PUT request body as application/json instead of plain/text将请求正文作为 application/json 而不是纯文本/文本
【发布时间】：2018-11-27 19:52:50
【问题描述】：

我正在搞乱 react 并尝试向 api 发出 put 请求。我正在尝试将我的正文作为内容类型应用程序/json 发送，但它一直以文本/纯文本形式发送。如果我添加标题 "Content-Type" : "application/json" 我只是得到这个作为回报。

预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Content-Type。

我正在使用这个 API：http://funtranslations.com/api/yoda

这是我的要求：

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

提前感谢您尝试帮助我:)

【问题讨论】：

您面临 CORS 配置错误，请查看：“Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers”。
@Xarvalus 我正在使用这个公共 API funtranslations.com/api/yoda，因此，我无法更改响应标头。有什么方法可以在我的请求中不包含“Content-Type”标头的情况下将我的 JSON 字符串作为 application/json 发送？
Content-Type 完全没问题，如果你真的在处理 JSON 对象，它应该是这样的。您有一些可能忽略 CORS 问题，请看这里：“Cors issue with third party api”

标签： javascript reactjs fetch-api

【解决方案1】：

我认为您发送的数据内容类型错误。根据funtranslation网站内容类型应该是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 清楚地解释了 CORS 问题

对于跨域请求，将内容类型设置为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 以外的任何内容都会触发浏览器向服务器发送预检 OPTIONS 请求.

我喜欢这张照片，看看什么是 CORS：

【讨论】：