（理由：CORSヘッダー 'Access-Control-Allow-Origin'が '（null）'と一致しません）

Question

私はAngularJSとトークンベースの認証を全く導入していません。実際には、AngularJSフレームワークをフロントエンドとして使用し、APIはバックエンドとして使用したいと考えています。したがって、私はインターネットからのチュートリアルに従いました。私はコードをhttps://github.com/mmSebastian/angularjsWebAPIに添付しました。

私は私のウェブアプリにログインしようとすると、私は私のブラウザでエラーの下に直面します。ブロックされた

• Firefoxの

クロスオリジンリクエスト：同一生成元ポリシーがでリモートリソースを読み込む禁止しますhttp：// localhost：50987/token。 （理由：CORSヘッダー 'Access-Control-Allow-Originが'（null） 'と一致しません）。

• クローム

は、httpロードに失敗しました：// localhostを：50987 /トークン： 'アクセス制御 - 許可 - 起源' ヘッダが複数の値 '*、*' が含まれていますが、一つだけです許可されます。したがって、 "http：// localhost：52386"はアクセスが許可されていません。

• エッジ

SEC7128：複数のアクセス制御 - 許可 - 起源ヘッダはCORS応答のために許可されていません。

ただし、http：// localhost：50987/tokenをPostmanで実行するとうまく動作します。

私は以下のリンクを試しましたが、それでも解決できませんでした。親切に助けてください。

1. Angularjs: Why does adding an authorization header cause a -1 status response?

2. MVC web api: No 'Access-Control-Allow-Origin' header is present on the requested resource

Answer 1

CORS（クロスオリジン）のサーバとまったく同じドメインを持つブラウザから作られたHTTPリクエストが必要です。

localhost：8080からlocalhost：8080へのリクエストは動作します

localhost：8080からlocalhost：8081へのリクエストは機能しません。

CORSエラーが発生します。これはブラウザによってのみ実施されるため、POSTMANはうまく動作します。

例えば、サーバーに関連するCORSヘッダを追加し、問題を修正するには：

Access-Control-Allow-Origin: * 

あなたは、サーバー上の他のアクセス・コントロール - ヘッダを追加する必要があります。

また、Webサーバーに特定の要求をバックエンドに直接プロキシすることで、ブラウザでCORS強制をバイパスすることができます。