用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就不能夠，會被拒絕。