CORS: PHP: プリフライト要求への応答が失敗しました。起源を許可します
P粉642920522
P粉642920522 2023-08-24 18:24:56
0
2
805
<p>CORS に関する投稿がたくさんあることはわかっており、それらを追加しているところですが、役立つ回答が見つかりません。そこで、PHP API に依存する Angular 4 アプリケーションを構築しています。ローカルでは問題なく動作しますが、<code>app.example.com</code> のアプリと <code>api.example.com</code> の API を使用してドメインにスローすると、次のエラーが表示されるので、ログインを渡します: </p> <ブロック引用> <p>XMLHttpRequest は http://api.example.com/Account/Login を読み込むことができません。 アクセス制御チェックに失敗したプリフライト要求への応答: いいえ リクエストに「Access-Control-Allow-Origin」ヘッダーが存在する リソース。したがって、ソース「http://app.example.com」は許可されません アクセス。</p> </blockquote> <p>我的php代码如下示:</p> <pre class="brush:php;toolbar:false;">$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); }</pre> <p>我の Angular 帖子如下示:</p> <pre class="brush:php;toolbar:false;">パブリック ログイン(ログイン: ログイン): 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 => { // コード }); }</pre> <p>如果我通过邮递员运行请求(これはCORSに影響しません)、我会得:</p> <pre class="brush:php;toolbar:false;">{ "error": "invalid_client", "error_description": "クライアントの資格情報がヘッダーまたは本文に見つかりませんでした" }</pre> <p>我尝试 起点は '<code>*</code>' に設定されます</p>これは、問題があるかどうかをテストして確認するためだけのものですが、それでも同様に失われています。 <p><strong><em>编辑</em></strong> 以下の情報に従って更新が行われるだけであり、フレーム内のサイズの書き込みは何の効果もなく、また、if フレーズからのコードの抽出も何の効果もありません。 <p>私は、報告書を介して php をローカル API に移行し、php は現在動作中です。 <p><strong><em>编辑镜头 2</em></strong> 何らかの助けが必要であることは確かですが、何かご希望がございましたら、よろしくお願いいたします。</p> <p><strong><em>ショット 3 を編集</em></strong> すべてのヘッダー要素を php ではなく .htaccess に設定すると、パスできます。しかし、今私は上記のエラーに悩まされています。これは Postman を使用するときにいつも発生するエラーですが、今度は実際の Web サイトを使用するときに発生します。 </p> <p><code>{"error":"invalid_client","error_description":"ヘッダーまたは本文にクライアント資格情報が見つかりません"}</code></p> <p>応答ヘッダーは次のようになります</p> <pre class="brush:php;toolbar:false;">Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:認可、コンテンツ タイプ、受け入れ、オリジン アクセス制御許可メソッド:GET、POST、OPTIONS Access-Control-Allow-Origin:*</pre> <p>うまくいったら、* から私のドメインのみに変更します。ただし、今は * のままにします。 </p> <p><strong>リクエストに応じてヘッダーを作成します。 </strong></p>
P粉642920522
P粉642920522

全員に返信(2)
P粉502608799

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

リーリー

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

リーリー

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

いいねを押す +0
P粉316890884

さて、私も最近同様の問題を抱えていましたが、.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」が含まれている必要があります。そうでない場合、リクエストは失敗します。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート