web-dev-qa-db-ja.com

プリフライト要求への応答がアクセス制御チェックに合格しないLaravelおよびAjax呼び出し

REST api made in Laravel 5.1 hosted in a remote server。ローカルで）。

Laravelで、CORSヘッダーを送信するために必要な行を設定しました。Postmanを使用してAPIもテストしましたが、すべて問題ないようです！

フロントエンド

次に、ウェブサイトで、次のコードとともに、POST ajaxを使用したリクエストを送信しました。

var url="http://xxx.xxx.xxx.xxx/apiLocation";
var data=$("#my-form").serialize();
    $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    headers: { 'token': 'someAPItoken that I need to send'},
                    success: function(data) {
                        console.log(data);
                    },
                    dataType: "json",
                });

購入すると、コンソールに次のエラーが表示されます。

XMLHttpRequestが読み込めません http://xxx.xxx.xxx.xxx/apiLocation 。プリフライト要求への応答がアクセス制御チェックに合格しません：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost 'はアクセスを許可されません。

バックエンドで

APIでこれを設定しました（Laravelミドルウェアを使用してヘッダーを設定））：

return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

だから、私は正確にどこが問題なのか混乱しています。

  1. サーバーで？しかし、なぜポストマンでうまくいくのですか？
  2. Ajax通話中ですか？では、何を追加すればよいですか？
javascriptjquerycorscross-domainlaravel-5.1
8
Sredny M Casanova

バックエンドコードには、構成されたヘッダーのみを含む200応答を送信するOPTIONS要求に対する明示的な処理を含める必要があります。例えば：

if ($request->getMethod() == "OPTIONS") {
    return Response::make('OK', 200, $headers);
}

サーバー側コードは、フロントエンドコードが送信しているtokenリクエストヘッダーの名前を含むAccess-Control-Allow-Headersレスポンスヘッダーも送信する必要があります。

-> header('Access-Control-Allow-Headers', 'token')

しかし、なぜポストマンでうまくいくのですか？

Postmanはウェブアプリではないため、ブラウザがウェブアプリに設定した同じオリジンポリシーの制限に拘束されず、クロスオリジンリクエストの実行を制限します。 Postmanは、curlまたはコマンドラインから何でも使用してブラウザーの外部でリクエストをテストできるのと同じように、リクエストをテストするのに便利なブラウザーボルトオンです。 Postmanはクロスオリジンのリクエストを自由に行うことができます。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 対照的に、ブラウザーがWebアプリからクロスオリジンリクエストをブロックする方法と、ブロックを解除する方法について説明しますブラウザーは、正しいCORSヘッダーを送信するようにバックエンドを構成することでそれを実行しません。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests は、ブラウザがバックエンドで処理する必要があるOPTIONSリクエストを送信する理由を説明しています。

4
sideshowbarker