web-dev-qa-db-ja.com

ヘッダーにno-corsがないとPOSTを取得できません

そのような要求を行うと：

return fetch(
            'http://localhost:8000/login',
            {   method: 'POST',
                headers: new Headers(
                   {"Content-Type": "application/json",
                    "Accept":"application/json"}
                ),

                body: JSON.stringify(
                   {'name': 'Tom', 'password': 'Soyer'}
                )
             }
           ).then( response => { console.log(response);})
            .catch(err => console.log(err))

pOSTの代わりにOPTIONSメソッドで実行するリクエスト。追加モードのみ： 'no-cors'要求はPOSTになります：

return fetch(
            'http://localhost:8000/login',
            {   method: 'POST',
                mode: 'no-cors',
                headers: new Headers(
                   {"Content-Type": "application/json",
                    "Accept":"application/json"}
                ),
                body: JSON.stringify(
                   {'name': 'Tom', 'password': 'Soyer'}
                )
             }
           ).then( response => { console.log(response);})
            .catch(err => console.log(err))

しかし、応答は（ネットワーク応答ステータスが200であっても）OKではありません：{type： "opaque"、url： ""、status：0、ok：false、statusText： ""…}

Content-Typeヘッダーに許可される値は、application/x-www-form-urlencoded multipart/form-data text/plainのみです。

ここで説明 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

フェッチでJSONデータをライブPOSTにする方法はありますか？

javascriptcorsfetch-api
25
htochko

送信するカスタムContent-Typeヘッダーにより、リクエストはプリフライトされます。つまり、送信されるPOSTリクエストに関するメタデータを含むOPTIONSリクエストが送信されます。 before実際のPOSTリクエスト。

サーバーは、このOPTIONSリクエストに対処する準備をする必要があります。サーバーの記述内容は指定していませんが、たとえばExpressでは、すべての「OPTIONS」リクエストをインターセプトし、Access-Control-Allow-Origin: *およびAccess-Control-Allow-Headers: Content-Typeヘッダーを設定し、200で応答するミドルウェアを登録できます。

'Content-Type'： 'text/plain'ヘッダーを使用してリクエストを作成できる場合、問題は解決します。あるいは、JSONPのように、XHRを完全にバイパスするものを使用できます。

33
Asad Saeeduddin

non-corsを使用する場合、すべてのヘッダーが有効simple-headersでなければなりません。 simple-headerとして修飾されるcontent-typeヘッダーの有効な値は次のとおりです。

headers: [
  ['Content-Type', 'application/x-www-form-urlencoded'],
  ['Content-Type', 'multipart/form-data'],
  ['Content-Type', 'text/plain'],
]

偶発的な例外：

headers: [
  ['Content-Type', 'application/csp-report'],
  ['Content-Type', 'application/expect-ct-report+json'],
  ['Content-Type', 'application/xss-auditor-report'],
  ['Content-Type', 'application/ocsp-request'],
]
0
sdc