プリフライト要求に対する応答がアクセス制御チェックに合格しないLaravel and Ajax call

Question

リモートサーバーでホストされているLaravel 5.1で作成されたREST APIがあります。今、私は別のウェブサイト（私がローカルに持っている）からそのAPIを消費しようとしています。

私は、CORSヘッダーを送信するために必要な行を設定しました。私はPostmanを使ってAPIをテストしましたが、すべてがOKです！そして、フロントエンドで

、私はこのコードで、AJAXを使用してPOSTリクエストを送信し、ウェブサイトで：

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'ヘッダーが存在します。 Origin 'http://localhost'はアクセスできません。

私は（ヘッダーを設定するLaravelミドルウェアを使用して）これを設定APIではバックエンド

で

：

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

だから、私は正確にある場所について混乱しています問題。

1. サーバーには？しかし、なぜPostmanはうまくいくのでしょうか？
2. Ajaxコールはありますか？だから、私は何を追加する必要がありますか？

Answer 1

OPTIONS要求のバックエンドコードには、設定されたヘッダーだけで200応答を送信する要求が含まれている必要があります。例えば：で、なぜ、その後

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

をしかし：

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

は、サーバー側のコードはまたあなたのフロントエンドのコードが送信されるヘッダtokenリクエストの名前が含まれAccess-Control-Allow-Headersレスポンスヘッダを送信する必要があります郵便配達はうまくいく？

Postmanはウェブアプリケーションではなく、同じオリジンポリシーに制限されていないため、ブラウザはウェブアプリに配置して、クロスオリジン要求を制限します。 Postmanは、curlなどのコマンドラインから何かを使ってブラウザ外で行うことができるのと同じ方法でリクエストをテストするための便利なブラウザです。郵便配達員は、クロスオリジンのリクエストを自由に行うことができます。

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）。