Fetch：发布 json 数据，将 application/json 更改为 text/plain答案

【问题标题】：Fetch: post json data, application/json change to text/plainFetch：发布 json 数据，将 application/json 更改为 text/plain
【发布时间】：2017-02-03 00:04:36
【问题描述】：

我使用的是 chrome 53.0.2785.116 m（64 位）。

我在 devtools 上获得了以下标题。问题用“//”注释标记。 content type 真的不允许我们设置为 application/json，我已经尝试了 100 种不同的方式。

import fetch from 'isomorphic-fetch';
const option = {
    method: 'POST',
    mode: 'no-cors',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({'aa':'bb'})
}
fetch('/books', opts)
.then(check401)
.then(check404)
.then(jsonParse)
.then(errorMessageParse);

请求标头

accept:application/json
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Content-Length:97
content-type:text/plain;charset=UTF-8 //What happen?
Host:127.0.0.1:8989
Origin:http://127.0.0.1:8989
Referer:http://127.0.0.1:8989/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

【问题讨论】：

注意，对象option被创建，虽然opts被传递给fetch。

标签： javascript google-chrome ecmascript-6

【解决方案1】：

非常感谢！解决这个问题需要 6 个多小时。

在我的 nodejs 服务器中

npm install --save cors

在 app.js 我插入了这些行：

var cors = require('cors');
var app = express(); 
app.use(cors());

在我的反应客户端中：

var shape_for_db = JSON.stringify(layer.geometry);
const trechoRede = {
    method: "POST",
    mode: "cors",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
         body: shape_for_db
};

【讨论】：

【解决方案2】：

问题是当你在“mode”“no-cors”下工作时，Headers 变成不可变的，你将无法更改它的某些条目。您无法更改的头之一是 Content-Type。当您将 'mode' 设置为 'no-cors' 时，您将只能更改这些标题：

Accept
Accept-Language
Content-Language
Content-Type，其值在解析后的 MIME 类型（忽略参数）为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain

换句话说，在 'mode' '-no-'cors' 中，您只能将application/x-www-form-urlencoded、multipart/form-data 或text/plain 设置为Content-Type。

所以解决方案是停止使用 fetch 或将其更改为 'cors' 'mode'。当然，这只有在您的服务器也接受“cors”请求时才有效。

这是一个如何在 Apache 服务器中启用 CORS 的示例

SetEnvIfNoCase Access-Control-Request-Method "(GET|POST|PUT|DELETE|OPTIONS)" IsPreflight=1
SetEnvIfNoCase Origin ".*" AccessControlAllowOrigin=$0
SetEnvIfNoCase Origin "https://(url1.com|url2.com)$" AccessControlAllowOrigin=$0

Header always set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" env=IsPreflight
Header always set Access-Control-Allow-Headers "Content-Type, Authorization, Accept, Accept-Language" env=IsPreflight
Header always set Access-Control-Max-Age "7200" env=IsPreflight
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteCond %{ENV:IsPreflight} 1
RewriteRule ^(.*)$ $1 [R=204,L]

上述代码将在必要时在响应中注入 CORS 标头。使用此代码，您的服务器将仅允许来自域“url1.com”或“url2.com”的 CORS。

这里有一些参考资料

【讨论】：

MEAN 堆栈应用程序如何做同样的事情？
@IpsitaRout，也许这可以帮助你：How to enable CORS in MEAN STACK web app?

【解决方案3】：

mode:"no-cors" 选项似乎是问题所在。删除该选项，Content-Type 应设置为 "application/json"

【讨论】：