CORS: PHP: プリフライト要求への応答が失敗しました。起源を許可します

Question

CORS に関する投稿がたくさんあることはわかっており、それらを追加しているところですが、役立つ回答が見つかりません。そこで、PHP API に依存する Angular 4 アプリケーションを構築しています。ローカルでは問題なく動作しますが、app.example.com のアプリと api.example.com の API を使用してドメインにスローすると、次のエラーが表示されるので、ログインを渡します:

<ブロック引用>

XMLHttpRequest は http://api.example.com/Account/Login を読み込むことができません。 アクセス制御チェックに失敗したプリフライト要求への応答: いいえ リクエストに「Access-Control-Allow-Origin」ヘッダーが存在する リソース。したがって、ソース「http://app.example.com」は許可されません アクセス。

我的php代码如下示：

$http_origin = $_SERVER['HTTP_ORIGIN'];

$allowed_domains = array(
    「http://example.com」、
    「https://example.com」、
    'http://app.example.com',
    'https://app.example.com',
    「http://www.example.com」、
    「https://www.example.com」
);

if (in_array(strto lower($http_origin), $allowed_domains))
{
    // header("Access-Control-Allow-Origin: *");
    header("アクセス制御許可オリジン: $http_origin");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');
}

// Access-Control ヘッダーは OPTIONS リクエスト中に受信されます
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
        header("アクセス制御の許可メソッド: GET、POST、OPTIONS");
        header("Access-Control-Allow-Headers: Authorization、Content-Type、Accept、Origin");
    終了(0);
}

我の Angular 帖子如下示：

パブリック ログイン(ログイン: ログイン): Observable<LoginResponse> {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('認可', '基本' btoa(login.ユーザー名 ':' ログイン.パスワード));
    return this.http.post(this.apiBaseUrl '/Account/Login', "grant_type=client_credentials", { headers: headers })
        .map(response => {
            // コード
        });
}

如果我通过邮递员运行请求（これはCORSに影響しません）、我会得：

{ "error": "invalid_client", "error_description": "クライアントの資格情報がヘッダーまたは本文に見つかりませんでした" }

我尝试 起点は '*' に設定されます

これは、問題があるかどうかをテストして確認するためだけのものですが、それでも同様に失われています。

编辑 以下の情報に従って更新が行われるだけであり、フレーム内のサイズの書き込みは何の効果もなく、また、if フレーズからのコードの抽出も何の効果もありません。

私は、報告書を介して php をローカル API に移行し、php は現在動作中です。

编辑镜头 2 何らかの助けが必要であることは確かですが、何かご希望がございましたら、よろしくお願いいたします。

ショット 3 を編集 すべてのヘッダー要素を php ではなく .htaccess に設定すると、パスできます。しかし、今私は上記のエラーに悩まされています。これは Postman を使用するときにいつも発生するエラーですが、今度は実際の Web サイトを使用するときに発生します。

{"error":"invalid_client","error_description":"ヘッダーまたは本文にクライアント資格情報が見つかりません"}

応答ヘッダーは次のようになります

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:認可、コンテンツ タイプ、受け入れ、オリジン
アクセス制御許可メソッド:GET、POST、OPTIONS
Access-Control-Allow-Origin:*

うまくいったら、* から私のドメインのみに変更します。ただし、今は * のままにします。

リクエストに応じてヘッダーを作成します。

Answer 1

私の同様のケースでは、Angular フロントエンドと Php バックエンドが以下のコードに役立ちました。最初にヘッダーを送信します:

リーリー

その後はオプションのリクエストを無視できます:

リーリー

このアプローチは、Angular で埋め込みリクエスト メソッドの「post」および「delete」を処理するのに役立ちました。

Answer 2

さて、私も最近同様の問題を抱えていましたが、.htaccess を使わずにバックエンドのみですべて解決しました。

ブラウザがクロスサーバーリクエストを送信するとき、最初に OPTIONS リクエストを送信して、リクエストが有効であること、および「実際の」リクエストを送信できることを確認します。 「実際の」リクエストは、OPTIONS から正しく有効な応答を取得したときに送信されます。

バックエンドへの両方のリクエストについて、content-type、allow-origin、allow-headers などの正しいヘッダーが返されることを確認する必要があります...

バックエンドの OPTIONS リクエストで、アプリケーションがアプリケーションの完全なフローを続行するのではなく、ヘッダーを返し、応答を返すようにしてください。

「実際の」リクエストでは、正しいヘッダーと通常の応答本文を返す必要があります。

＃＃＃例：＃＃＃ リーリー ＃＃＃ 覚えておくべきこと： ＃＃＃

使用する場合: "Access-Control-Allow-Credentials" = true 「Access-Control-Allow-Origin」が「*」になっていないことを確認してください。正しいドメインに設定する必要があります。 (ここでたくさんの血が流されました:/)

• 「Access-Control-Allow-Headers」で取得する許可ヘッダーを定義します。 定義しない場合、リクエストは失敗します

• 「Authorization: Bearer」を使用する場合、「Access-Control-Allow-Headers」にも「Authorization」が含まれている必要があります。そうでない場合、リクエストは失敗します。