CORSエラー：要求ヘッダーフィールドプリフライト応答でAccess-Control-Allow-Headersによる許可が許可されていません

Question

要求をあるlocalhostポートから別のlocalhostポートに送信しようとしています。フロントエンドではのanglejs、バックエンドではノードを使用しています。

それはCORS要求であるので、Node.jsので、私は

res.header('Access-Control-Allow-Origin', '*'); 
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH'); 
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization'); 

とangular.jsサービスファイルで、私は私が取得しています

return { 
    getValues: $resource(endpoint + '/admin/getvalues', null, { 
     'get': { 
      method: 'GET', 
      headers:{'Authorization':'Bearer'+' '+ $localStorage.token} 
      } 
    }), 
} 

を使用していますを使用しています次のエラー

要求ヘッダーフィールド許可は、プリフライト応答でAccess-Control-Allow-Headersによって許可されていません。

助けてください！

Answer 1

許可されたヘッダーにもオプションを追加する必要があります。ブラウザは元の要求が送信される前にプリフライト要求を送信します。サーバは、これらのパラメータを持つリクエストを送信するために許容可能であるかどうかに対応できるように、ソースhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS CORSで

から

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS'); 

下記参照、OPTIONSメソッドでプリフライトリクエストが送信されます。 Access-Control-Request-Methodヘッダーは、実際の要求が送信されたときにPOST要求メソッドとともに送信されるプリフライト要求の一部としてサーバーに通知します。 Access-Control-Request-Headersヘッダーは、実際の要求が送信されたときにX-PINGOTHERとContent-Typeのカスタムヘッダーと共に送信されることをサーバーに通知します。サーバーは、このような状況下で要求を受け入れるかどうかを決定する機会を得ました。あなたはnpmjs.com/package/cors NPM package.Iを使用して、この手動設定を回避することができ

編集

も、このメソッドを使用している、それが明確で簡単です。

Answer 2

corsライブラリをインストールせず、元のコードを修正したい場合は、Access-Control-Allow-Origin：*が間違っているという欠点があります。認証トークン（例：JWT）を渡すときは、サーバーを呼び出すすべてのURLを明示的に指定する必要があります。認証トークンを実行するときは "*"を使用できません。

Answer 3

これはAPIの問題です.Postman/Fielderを使用してAPIにHTTPリクエストを送信すると、このエラーは発生しません。ブラウザの場合、セキュリティ上の理由から、実際のリクエスト（GET/POST/PUT/DELETE）を送信する前に、OPTIONS request/preflightをAPIに送信します。したがって、リクエストメソッドがOPTIONの場合は、「アクセス制御許可ヘッダー」に「認可」を追加する必要があるだけでなく、「アクセス制御許可メソッド」に「OPTIONS」を追加する必要があります。よくこれは私が、固定方法だった：

if (context.Request.Method == "OPTIONS") 
     { 
      context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] }); 
      context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" }); 
      context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" }); 
      context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" }); 

     }