web-dev-qa-db-ja.com

「Access-Control-Allow-Origin」ヘッダーの値が「http：// localhost：4200」であり、指定されたオリジンと等しくない

（タイトルのエラーメッセージの続き）「Origin ' http://127.0.0.1:42 'は、したがってアクセスを許可されていません。」

同じAPIを使用している場合、2つの異なるドメインで同じAngular 5サイトを実行できません。

このエラーメッセージはChromeから発生しています。 Firefoxのエラーは次のとおりです。

Cross-Origin Request Blocked：Same Origin Policyは、 http：//myapitest.local/v1/subscription/current/products でリモートリソースの読み取りを許可しません。 （理由：CORSヘッダー「Access-Control-Allow-Origin」は「 http://127.0.0.1:42 」と一致しません）

このことに気づいたのは、通常のアプリから別のURLで実行されるAngularアプリのホワイトラベルバージョンで作業しているが、同じLaravel AP​​Iを同じURL。 Laravelに適切なCORS設定を追加しましたが、これはブラウザの問題のようです-どうやって回避するのかわかりません。

たとえば、localhost：4200から127.0.0.1:4200に変更して、localhostでこれを再作成しました。

奇妙なことに、プリフライトは正しいCORSヘッダーで成功しているようです。 enter image description here

ただし、GETでは、応答に誤ったAccess-Control-Allow-Originヘッダーが返されるようです。
enter image description here

ここで、APIの許可されたオリジンをすべて（ '*'）を許可するように変更しても、この問題は修正されません。

このことを明確にするために、他にどのような情報やコードを提供できるかわかりません。ありがとう。

angularlaravelsecuritycors
11
QuietSeditionist

Apiが8080で実行され、angular 4200でコードが実行されると仮定します。

angularアプリでproxy.conf.jsonというファイルを作成します

{
    "/api/": {
        "target": "http://localhost:8080/",
        "secure": false,
        "changeOrigin": true
    }
}

Start angularこのコマンドを使用したアプリ

ng serve --port 4200 --proxy-config proxy.conf.json

この構成では、localhost：4200/apiを呼び出すと8080が呼び出され、CORSエラーは発生しません。

5
Mesut Gölcük

angular webpack開発サーバーによって提供されるリクエストにプロキシを設定できます。プロキシを使用することにより、ホストされたangularドメインからのバックエンドURLを変更できますURL：これは、serveコマンドまたはpackage.jsonの-proxy-configによって実現されるため、angularは同じバックエンドサービスの異なるURlsで実行されます。

package.jsonの近くにproxy.conf.jsonという名前のファイルを追加します。リクエスト取得URLから/ proxy

Proxy.confファイルにこれを追加します

{
  "/proxy": {
  "target": "http://localhost:3000",
  "secure": false,
  "pathRewrite": {
  "^/proxy": ""
 }
}

serveコマンドを次のように変更します

ng serve --proxy-config proxy.conf.json --port 4200 --Host 0.0.0.0

または

angular.jsonでサーブターゲットを変更します

"architect": {
    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "browserTarget": "your-application-name:build",
    "proxyConfig": "proxy.conf.json"
 },

注：HttpサービスのURLおよびプロキシ設定に/ proxyを追加するのは、開発目的のみにしてください。

実稼働環境の場合Webサーバーで構成する必要があります。

0
esakki

問題は名前マッピングにあります。サーバープールには複数のIPアドレスがある場合があるため、ほとんどのブラウザーはIPアドレスを名前にマップします。これは通常、要求されたDNS名を介して行われます。あなたの場合、名前がないので、hostsファイル（Linuxでは/ etc/hosts、WindowsではC：\ Windows\System32\Drivers\etc\Hosts）でIPアドレスを検索し、そこから名前を返しています。

ドメイン全体でテストする必要があるため（2つの別個のサーバーとして機能）、myapitest.localを127.0.0.2にポイントするホストファイルに行を追加します。行myapitest2.localから127.0.0.3へ。これにより、ローカルの名前付けがIPアドレスと一致し、適切な構成（各サーバーインスタンスにバインドする特定のリスニングアドレスを指定）で各サーバーインスタンスがポート80で実行できるようになります。

すべてのクロスオリジンリクエストおよび承認で名前を使用します。

編集

Access-Control-Allow-Credentials: trueが原因で、ワイルドカードは機能しません。

Dev-api.ourdomain.comサーバーで：承認済みドメインのAccess-Control-Allow-Origin:ヘッダーを作成するルートファイルRoutes/api.phpに Response Header を追加します。これをミドルウェアとして適用することもできますが、簡単にするために、単純なルートで説明します。これは、プリフライトルートでも実行する必要があります。

Route::get('/method/{id}', function (Request $request, $id) {
    $retval = method($id);
    $Origin_allowed = $request->header('HTTP_Origin');
    $allowed = array("dev.ourdomain.com", "dev.alternatedomain.com");
    if(in_array($Origin_domain, $allowed))
        return ($retval)->header('Access-Control-Allow-Origin:',$Origin_domain);
    else 
        return "Unauthorized";
});

これは、概念を示すための単なるサンプルコードです。

ログアウト時にHTTP認証とcsrfトークンをクリアしていることを確認してください。

0
Strom

リバースプロキシサーバーをセットアップし、両方のドメインのパスを構成します。
Nginxガイド

これにより、 http：// localhost / 経由ですべてにアクセスできます。
仮定：
A-> Angular App（localhost：4200）
B->他のドメインAPI（myapitest.local）

フローの例：
-ブラウザリクエスト（ http：// localhost/angular ）-> Nginx-> A
-バックエンドからデータを読み込む-> Nginx-> B

したがって、Nginxの助けを借りて、 http：// localhost / から「A」にアクセスし、 http：// localhost / からも「B」にアクセスできます。
Originは同じであるため、CORSエラーは発生しません。

0
Saddam Pojee