web-dev-qa-db-ja.com

CORSエラー：プリフライトレスポンスでAccess-Control-Allow-Headersがリクエストヘッダーフィールドの許可を許可していません

あるlocalhostポートから別のlocalhostポートにリクエストを送信しようとしています。 フロントエンドのangularjsとバックエンドのノードを使用しています。

CORS requestであるため、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ではリクエストヘッダーフィールドの許可は許可されていません。

助けてください！

javascriptangularjsnode.jshttp-headerscors
34
Abhishek Kulshrestha

許可されたヘッダーにもオプションを追加する必要があります。ブラウザは、元のリクエストが送信される前にプリフライトリクエストを送信します。下記参照

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

ソースから https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

CORSでは、OPTIONSメソッドを使用したプリフライトリクエストが送信されるため、サーバーはこれらのパラメーターを使用してリクエストを送信してもよいかどうかに応じることができます。 Access-Control-Request-Methodヘッダーは、プリフライトリクエストの一部としてサーバーに、実際のリクエストが送信されると、POSTリクエストメソッドで送信されることを通知します。 Access-Control-Request-Headersヘッダーは、実際のリクエストが送信されると、X-PINGOTHERおよびContent-Typeカスタムヘッダーとともに送信されることをサーバーに通知します。サーバーには、これらの状況下でリクエストを受け入れるかどうかを判断する機会があります。

編集

npmjs.com/package/cors npm packageを使用することで、この手動構成を回避できます。この方法も使用しました。これは明確で簡単です。

27
vikas

これはAPIの問題です。Postman/ Fielderを使用してAPIにHTTPリクエストを送信する場合、このエラーは発生しません。ブラウザの場合、セキュリティの目的で、実際のリクエスト（GET/POST/PUT/DELETE）を送信する前に、常にOPTIONSリクエスト/プリフライトをAPIに送信します。したがって、要求メソッドはOPTIONであり、「Authorization」を「Access-Control-Allow-Headers」に追加するだけでなく、「OPTIONS」を「Access-Control-allow-methods」に追加する必要があります。まあ。これは私が修正した方法でした：

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" });

        }
23
Hung Vu

res.header('Access-Control-Allow-Origin', '*');はAuthorizationヘッダーでは機能しません。 cors library を使用して、プリフライトリクエストを有効にします。

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.options('*', cors())
4
o.z

ServiceStackバックエンドを使用してこれを取得しているユーザー向け。 Corsプラグイン の許可されたヘッダーに「Authorization」を追加します。

Plugins.Add(new CorsFeature(allowedHeaders: "Content-Type,Authorization"));

2
user1713059

最初にインストールが必要cors以下のコマンドを使用して：

npm install cors --save

次のコードを追加アプリ開始ファイルに（app.js or server.js）のように

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'Origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);
0
Shubham Verma

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

0
user441058