Question

我正在使用chrome 53.0.2785.116 m（64位）。

我在devtools上有以下标题。该问题标有“//”注释。内容类型实际上不允许我们将它设置为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

Answer 1

问题在于，当你在＆＃39;模式下工作时＆＃39; no-cors＆＃39;，Headers变为不可变的，你将无法改变它的一些条目。您无法改变的一个主要是Content-Type。当您设置＆＃39;模式＆＃39;到了“没有人”。您将只能更改这些标题：

Accept
Accept-Language
Content-Language
Content-Type，其值经解析后，具有application/x-www-form-urlencoded，multipart/form-data或text/plain

换句话说，在＆＃39;模式＆＃39; ＆＃39; - 无 - ＆＃39; CORS＆＃39;您只能将application/x-www-form-urlencoded，multipart/form-data或text/plain设置为Content-Type。

因此解决方案是停止使用提取或将其更改为“cors＆＃39; ＆＃39;模式＆＃39 ;.当然，这仅适用于您的服务器也接受＆＃39; cors＆＃39;请求。

以下是如何在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头。使用此代码，您的服务器将仅允许来自域的CORS＆＃34; url1.com＆＃34;或＆＃34; url2.com＆＃34;。

以下是一些参考资料

Answer 2

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

Answer 3

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

在我的nodejs服务器中

npm install --save cors

在app.js中，我插入了以下行：

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

并在我的react客户中：

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
};

获取：发布json数据，application / json更改为text / plain

3 个答案: