web-dev-qa-db-ja.com

フェッチ：jsonデータの投稿、application / jsonのtext / plainへの変更

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
javascriptgoogle-chromeecmascript-6
16
Bowen Wang

問題は、「モード」「no-cors」で作業すると、ヘッダーが不変になり、一部のエントリーを変更できないことです。変更できないヘッドの1つはContent-Typeです。 'mode'を 'no-cors'に設定すると、これらのヘッダーのみを変更できます。

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Typeとその値は、一度解析されると、application/x-www-form-urlencoded、multipart/form-data、またはtext/plainのMIMEタイプ（パラメーターを無視）を持ちます

つまり、「モード」「-no-'cors」では、application/x-www-form-urlencoded、multipart/form-data、またはtext/plainをContent-Typeにのみ設定できます。

したがって、解決策はフェッチの使用を停止するか、それを「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のみを許可します。

ここにいくつかの参考文献があります

22
Stavarengo

mode:"no-cors"オプションが問題のようです。そのオプションを削除すると、Content-Typeが"application/json"に設定されます。

0
guest271314