用fetch与服务器进行交互时headers中content-type的配置问题以及涉及到的跨域问题

最近在用react+node.js作项目的时候遇到一个问题：前端须要post给服务器的内容为json格式的（也就是content-type为application/json的格式），使用fetch()来与服务器进行交互时，设置 headers的中content-type为application/json，数据发送不到到服务器并报错以下：

我明明时候用的是post方法！

然而试了不少种方法以后，在headers里添加mode:'no-cors'（意为”不跨域“）后，能提交成功，可是查看request的headers发现content-type自动变成了text-plain，这并非服务器指望接受到的数据格式。

后来我goooooooogle了一下，在stackoverflow上看到这样一段回答：

大概意思为：在'no-cors'模式下，咱们不能修改content-type，而content-type的值只能是application/x-www-form-urlencoded、multipart/form-data或text/plain。

若是不设置mode，直接设置content-type为application/json，则fetch会默认这是跨域模式（mode:'cors'），在跨域POST以前，客户端会先发一条OPTIONS请求来”探探路”，若是服务器容许，再继续POST数据。对于这种OPTIONS请求，须要在服务器配置容许接受OPTIONS请求，个人配置以下：

if (ctx.request.method == "OPTIONS") {
    ctx.response.status = 200
}

我这样写就是直接容许了全部的OPTIONS请求，也能够按照需求来判断OPTIONS请求中更详细的信息。
固然，若是你的项目确实涉及到跨域问题，除了判断OPTIONS方法的请求以外，还须要配置一下请求头，个人node.js项目中的配置以下（使用的是KOA2框架）：

app.use(async(ctx, next) => {
        ctx.set("Access-Control-Allow-Origin", "*");
        ctx.set("Access-Control-Allow-Credentials", true);
        ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE");
        ctx.set("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type");
        ctx.set("X-Powered-By", ' 3.2.1');
        ctx.set("Content-Type", "application/json;charset=utf-8");
        if (ctx.request.method == "OPTIONS") {
            ctx.response.status = 200
        }
    }
    await next();
});

这样，前端就不须要再作跨域处理了。

新手上路，理解有误的请你们指正~

=============2017.6.16更新==================

nodejs中跨域header配置中的header字段，必定要跟fetch里设置的header字段一致，好比：
在nodejs中配置头文件：

ctx.set("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type");

那么，在fetch中配置content-type要写得与上述代码中的一致。nodejs中写的是content-type,fetch中就写content-type，写成contentType就不能够，会被拒绝。