2015-12-23 17 views
8

の作品ながら、私は私の角度ログインサービスからPOSTしよう:角度POSTクロスオリジン・エラーPOSTMANが

$http.post('https://xyz/login', 
      { 
       headers: { 
        'Content-type': 'application/json', 
        'Accept': 'application/json', 
        'signature': 'asd' 
       } 

そして、私はこのエラーを取得する:

XMLHttpRequest cannot load https://xyz/login. 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:1337' is therefore not allowed access. 

私はこのヘッダを試してみました:

$httpProvider.defaults.useXDomain = true; 
delete $httpProvider.defaults.headers.common['X-Requested-With']; 

また、これらは:

"Access-Control-Allow-Origin": "*"; 
"Access-Control-Allow-Headers": "X-Requested-With"; 
"Access-Control-Allow-Methods": "GET, POST", "PUT", "DELETE"; 

興味深いのは、POSTMANが動作することです。 私は何をしなければならないのですか?

ありがとうございました。

+0

サーバーでCORSを有効にしていますか?詳細については、http://enable-cors.org/を参照してください。 – heavyhorse

+0

ねえ。それは私のサーバーではなく、外部サービスです。私はPOSTMANによって応答を得ることができるので、corsが有効になっていると思います。 – user3712353

+1

POSTMANは通常のWebコンテキストを実行せず、同じ発信元ポリシーの対象ではありません。 [同じオリジナルポリシーがブラウザの拡張機能にどのように適用されますか?](http://stackoverflow.com/questions/11849945/how-does-same-origin-policy-apply-to-browser-extensions/11850557#11850557) – apsillers

答えて

5

お客様のリクエストには、単純なヘッダーContent-typesignatureが含まれており、応答のAccess-Control-Allow-Headersヘッダーに含める必要があります。

Content-typeapplication/jsonは、これらの値ではありません。しかし、唯一の特定の値のために、時にはシンプルなヘッダであり、それは非シンプルになるためにContent-typeが発生します。)

サーバーのプリフライト応じてAccess-Control-Allow-HeadersContent-typeを追加します。

POSTMANは同じ起点ポリシーによってバインドされていないため、サーバーからのCORSサポートは必要ありません。

+0

興味深いこの洞察のおかげで、このケースでは必要な署名のエントリですか? – danday74

+0

まだ同じです。私はこれを私の角型アプリケーションの設定に加えました: '$ httpProvider.defaults.useXDomain = true; $ httpProvider.defaults.headers.commonを削除します['X-Requested-With']; $ httpProvider.defaults.headers.common ['アクセス制御許可ヘッダー'] = '*'; $ httpProvider.defaults.headers.common ['Access-Control-Allow-Origin'] = '*'; $ httpProvider.defaults.headers.common ['Access-Control-Allow-Methods'] = '*'; ' – user3712353

+0

@ user3712353ああ、後者のコードスニペットがサーバー側のコードで実行されていると仮定しました。あなたは* CORSヘッダーを送る*サーバー*を持つ必要があります。 – apsillers

2

POSTする前にブラウザがOPTIONSリクエストを行っていますか? NETのタブを確認してください ブラウザでOPTIONSリクエストが行われた場所、またはAngular(どこかわかりません)の場所に問題がありました...

"Access-Control-Allow -Methods ":" GET、POST "、" PUT "、" DELETE "、" OPTIONS ";

+0

ねえ。ご覧のとおり、メソッドに「*」を追加しました。それでも動作しません。 – user3712353

+0

ノードコードでOKを使って、POSTMANが使用しているヘッダをダンプし、ブラウザで使用されているヘッダをダンプし、2つを比較して、動作している設定にそれらを試してみてください!私は角度のヘッダーを取得し、それらも郵便配達で使用し、それが失敗するかどうかを確認します。一度に1つずつ削除することで、問題の原因となっているヘッダーを特定します。ブラウザのNETタブからヘッダーを取得し、POSTMANリクエストにコピーして、一度に1つずつ取り除くことができます。 – danday74

+0

POSTするサービスは私のものではなく、認証のための外部サービスです。私は角度コードで何を変えればいいのか分かりません。はい、それはOPTIONSをメソッドとして送信します。 – user3712353

0

必要な情報が既にあるかどうかわかりません。しかし、私のローカルWebサーバに - 私はここに郵便配達を使用してHTTP要求を行う際には、それがヘッダに追加するものです。

ヘッダ: {ホスト「localhost」の、 接続:「キープアライブ」、 プラグマ: 'no-cache'、 'cache-control': 'no-cache'、 'user-agent': 'Mozilla/5.0(Windows NT 10.0; WOW64)AppleWebKit/537.36(GeckoのようなKHTML)Chrome/47.0 .2526.106サファリ/ 537.36' 、 受け入れる: '/'、 リファラ: 'http://localhost/'、 'をエンコード受け入れる': ''、 'をgzipで、収縮、SDCHを-言語を受け入れる':「EN-US、 ; q = 0.8 '}、

そして、ここでは、私がrawHeadersで見るものである。 [ 'ホスト'、 'localhostの'、 '接続'、 'キープアライブ'、 'プラグマ'、 'キャッシュなし'、 "キャッシュコントロール '、 ' no-cache '、 ' User-Agent '、 ' Mozilla/5.0(Windows NT 10.0; WOW64)AppleWebKit/537.36(GeckoのようなKHTML)Chrome/47.0.2526.106 Safari/537。36' '' は、 '/' 'リファラーを受け入れる' 'http://localhost/' ' ' '' を、 ' GZIP、収縮、SDCHエンコードを受け入れ言語を受け入れ' ' en-US、en; q = 0.8 ']、

おそらく、あなたのクライアントを認識されたブラウザクライアントとして偽装する必要があります。

+0

ねえ。私は理解していない、それは同じヘッダーです。 – user3712353

+0

どういう意味でしょうか? var headers = {host: 'localhost'、接続: 'keep-alive'、プラグマ: 'no-cache'、 'cache-control' : 'no-cache'、 'user-agent': 'Mozilla/5.0(Windows NT 10.0; WOW64)AppleWebKit/537.36(GeckoのようなKHTML)Chrome/47.0.2526.106 Safari/537.36'、accept: '/'、referer : 'http:// localhost /'、 'accept-encoding': 'gzip、deflate、sdch'、 'accept-language': 'en-US、en; q = 0。8 '}; VARオプション= { ホスト: 'ローカルホスト'、 パス: '/'、 ポート: '80'、 ヘッダー:ヘッダー }。 var req = http.request(options、callback); – Tim

+0

私はちょうどその問題を理解したかもしれないと思う - 私はあなたがssl/tls(httpsを使用)を使用しようとしていることに気づいた。 別のウェブサイトを指しているブラウザクライアント内から角度JSを使用している場合、これはうまくいかないと思います。 私は、これはセキュリティ上の制限であるかもしれないと信じて:あなたがしようとしている場合は https://docs.angularjs.org/api/ng/service/$http#cross-site-request-forgery-xsrf-protection 同じサイトにポストを実行するために - 完全なドメイン/ホストを前に付けないでください: ます。https: 「ログイン/」 または 「ログイン」:// XYZ /ログイン はただパスを使用します – Tim