フェッチでカスタムヘッダーが送信されない

Question

フェッチ呼び出しでカスタムヘッダーを送信しようとしていますが、何らかの理由でヘッダーが送信されていないようです。私は 'cors'モードをフェッチオプションとして設定する必要があると思われるいくつかの質問を見つけましたが、私はそれを試みましたが、違いはありませんでした。

私はこのエラーを取得していますコンソールで

：

Fetch API cannot load http://localhost:8000/GroupRoutePermission. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 

私は私の要求をフェッチからのX-APIキーヘッダを削除する場合しかし、私はどのCORSコンソールのエラーを取得し、JSONを得ることはありません応答はちょうどいい - 私のJSONは、APIキーが設定されていないとのエラー（期待どおり）。

また、x-api-keyが設定されたPostmanでエンドポイントにヒットしました。正常に動作します。不思議にも私は以前の私のプロジェクトから以下のコードを取り除きました。そのプロジェクトでカスタムヘッダーはちゃんと送られてきました。

let apiKey = "" 
if (typeof localStorage.apiKey != 'undefined') 
    apiKey = localStorage.apiKey 
else 
    window.location = "/login" 

console.log(apiKey) 

fetch(url,{ 
    credentials: 'include', 
    mode: 'cors', 
    headers: new Headers({ 
     'Content-Type': 'text/plain', 
     'x-api-key': localStorage.apiKey 
    }) 
}) 

クロームネットワークタブリクエストヘッダ：

Accept:*/* 
Accept-Encoding:gzip, deflate, sdch, br 
Accept-Language:en-US,en;q=0.8,fr-CA;q=0.6,fr;q=0.4,en-CA;q=0.2 
Access-Control-Request-Headers:x-api-key 
Access-Control-Request-Method:GET 
Cache-Control:max-age=0 
Connection:keep-alive 
Host:localhost:8000 
Origin:http://localhost:8082 
Referer:http://localhost:8082/lists/ResearchTrial 
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36 

レスポンスヘッダX-APIキーで送ら：

HTTP/1.1 200 OK 
Host: localhost:8000 
Connection: close 
X-Powered-By: PHP/5.5.38-4+deb.sury.org~xenial+1 
Allow: GET,HEAD 
Cache-Control: no-cache 
Content-Type: text/html; charset=UTF-8 
Date: Tue, 12 Sep 2017 19:30:58 GMT 

レスポンスヘッダを私は要求におけるX-APIキーを削除する場合：

HTTP/1.1 200 OK 
Host: localhost:8000 
Connection: close 
X-Powered-By: PHP/5.5.38-4+deb.sury.org~xenial+1 
Access-Control-Allow-Origin: http://localhost:8082 
Access-Control-Allow-Credentials: true 
Access-Control-Allow-Headers: Content-Type, Content-Length, Accept- Encoding, X-Api-Key 
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE 
Cache-Control: no-cache 
Content-Type: application/json 
Date: Tue, 12 Sep 2017 19:28:29 GMT 

助けてください！

Answer 1

I've ripped the below code out of a previous project of mine, and in that project the custom header gets sent just fine (even without cors mode), so I'm at a loss as to what else to try.

このプロジェクトでもドメイン間のリクエストが行われましたか？

私の推測では、authが失敗するとAPIはcorsヘッダーを送信しますが、authが成功するとヘッダーは送信されません。これは、corsについて心配する必要のないPostmanには影響しません。

あなたは、認証されたリクエストを送信して応答ヘッダーをチェックすることで、これを郵便配達員で確認することができます。