2017-10-29 20 views
0

私はLaravel Lumenにapiを持っていますが、PostmanとRuby Rest Clientを使ってテストしていますが、すべてうまくいっていますが、Webトークンに応答する、私たちのReact Appでは、実際にはこの "405 405 Method Not Allowed"があります。ルーメンAPI CORS Ajax 405メソッドが許可されていません

は、私たちは、次のコードを持つクラスを作成:私たちは、ブートストラップに追加

<?php namespace palanik\lumen\Middleware; 

use Closure; 
use Illuminate\Http\Response; 

class LumenCors { 

    protected $settings = array(
       'origin' => '*', // Wide Open! 
       'allowMethods' => 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS', 
       ); 

    protected function setOrigin($req, $rsp) { 
     $origin = $this->settings['origin']; 
     if (is_callable($origin)) { 
      // Call origin callback with request origin 
      $origin = call_user_func($origin, 
            $req->header("Origin") 
            ); 
     } 
     $rsp->header('Access-Control-Allow-Origin', $origin); 
    } 

    protected function setExposeHeaders($req, $rsp) { 
     if (isset($this->settings['exposeHeaders'])) { 
      $exposeHeaders = $this->settings['exposeHeaders']; 
      if (is_array($exposeHeaders)) { 
       $exposeHeaders = implode(", ", $exposeHeaders); 
      } 

      $rsp->header('Access-Control-Expose-Headers', $exposeHeaders); 
     } 
    } 

    protected function setMaxAge($req, $rsp) { 
     if (isset($this->settings['maxAge'])) { 
      $rsp->header('Access-Control-Max-Age', $this->settings['maxAge']); 
     } 
    } 

    protected function setAllowCredentials($req, $rsp) { 
     if (isset($this->settings['allowCredentials']) && $this->settings['allowCredentials'] === True) { 
      $rsp->header('Access-Control-Allow-Credentials', 'true'); 
     } 
    } 

    protected function setAllowMethods($req, $rsp) { 
     if (isset($this->settings['allowMethods'])) { 
      $allowMethods = $this->settings['allowMethods']; 
      if (is_array($allowMethods)) { 
       $allowMethods = implode(", ", $allowMethods); 
      } 

      $rsp->header('Access-Control-Allow-Methods', $allowMethods); 
     } 
    } 

    protected function setAllowHeaders($req, $rsp) { 
     if (isset($this->settings['allowHeaders'])) { 
      $allowHeaders = $this->settings['allowHeaders']; 
      if (is_array($allowHeaders)) { 
       $allowHeaders = implode(", ", $allowHeaders); 
      } 
     } 
     else { // Otherwise, use request headers 
      $allowHeaders = $req->header("Access-Control-Request-Headers"); 
     } 

     if (isset($allowHeaders)) { 
      $rsp->header('Access-Control-Allow-Headers', $allowHeaders); 
     } 
    } 

    protected function setCorsHeaders($req, $rsp) { 

     // http://www.html5rocks.com/static/images/cors_server_flowchart.png 
     // Pre-flight 
     if ($req->isMethod('OPTIONS')) { 
      $this->setOrigin($req, $rsp); 
      $this->setMaxAge($req, $rsp); 
      $this->setAllowCredentials($req, $rsp); 
      $this->setAllowMethods($req, $rsp); 
      $this->setAllowHeaders($req, $rsp); 
     } 
     else { 
      $this->setOrigin($req, $rsp); 
      $this->setExposeHeaders($req, $rsp); 
      $this->setAllowCredentials($req, $rsp); 
     } 
    } 

    /** 
    * Handle an incoming request. 
    * 
    * @param \Illuminate\Http\Request $request 
    * @param \Closure $next 
    * @return mixed 
    */ 
    public function handle($request, Closure $next) { 

     if ($request->isMethod('OPTIONS')) { 
      $response = new Response("", 200); 
     } 
     else { 
      $response = $next($request); 
     } 

     $this->setCorsHeaders($request, $response); 

     return $response; 
    } 

} 

を/ app.php

$app->routeMiddleware([ 
    'auth' => App\Http\Middleware\Authenticate::class, 
    'cors' => palanik\lumen\Middleware\LumenCors::class, 
]); 

そして、我々のルート:私たちの残りのクライアントと

$app->group(['middleware' => 'cors'], function($app) 
{ 
    $app->post('/auth/login', function() { 
     return response()->json([ 
      'message' => 'CORS OPTIONS Accepted.', 
     ]); 
    }); 
}); 

すべてうまくいくが、ブラウザがOPTIONSを送信するので、Reactのjsアプリケーションでどのように言ったのか、リクエストはPOSTに渡されない。

当社RECAT Axios要求:

axios({ 
    method: 'post', 
    url: 'URL', 
    data: { 
      email: 'Fred', 
      password: 'Flintstone' 
    } 
    }).then(function (response) { 
     console.log(response); 
    }) 
    .catch(function (error) { 
     console.log(error); 
    }); 

エラー詐欺ログインリアクト: 問題は、OPTIONSがブラウザのためにPOSTする前に送るということです。 ヘッダーの応答: HTTP/1.1 405メソッドが許可されない 許可:POST キャッシュコントロール:no-cache、private コンテンツタイプ:text/html;文字セット= UTF-8 日:日、2017年10月29日1時30分34秒GMT サーバー:Apacheの/ 2.4.18(Ubuntuの) 転送エンコーディングは: 接続をチャンク:キープアライブ

私たちは何が欠けています私たちのAPIについて?

よろしくお願いいたします。

答えて

1

元の要求を送信する前には、かどうかを確認するHTTPメソッドオプションの要求を送信リアクトクロスドメインリクエストはAPIサーバーで受け入れられますか?

以下は、私が続くアプローチは次のとおりです。

option

Route::options(
    '/{any:.*}', 
    [ 
     'middleware' => ['CorsMiddleware'], 
     function(){ 
      return response(['status' => 'success']); 
     } 
    ] 
); 

CorsMiddlewareが要求を処理するために使用するミドルウェアであるメソッドのワイルドカードのルートを追加します。 bootstrap/app.php

<?php 

namespace App\Http\Middleware; 

use Closure; 
use Illuminate\Http\Response; 

class CorsMiddleware 
{ 
    protected $settings = array(
     'origin' => '*', // Wide Open! 
     'allowMethods' => 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS', 
    ); 

    protected function setOrigin($req, $rsp) { 
     $origin = $this->settings['origin']; 
     if (is_callable($origin)) { 
      // Call origin callback with request origin 
      $origin = call_user_func($origin, 
         $req->header("Origin") 
        ); 
     } 
     $rsp->header('Access-Control-Allow-Origin', $origin); 
    } 

    protected function setExposeHeaders($req, $rsp) { 
     if (isset($this->settings['exposeHeaders'])) { 
      $exposeHeaders = $this->settings['exposeHeaders']; 
      if (is_array($exposeHeaders)) { 
       $exposeHeaders = implode(", ", $exposeHeaders); 
      } 

      $rsp->header('Access-Control-Expose-Headers', $exposeHeaders); 
     } 
    } 

    protected function setMaxAge($req, $rsp) { 
     if (isset($this->settings['maxAge'])) { 
      $rsp->header('Access-Control-Max-Age', $this->settings['maxAge']); 
     } 
    } 

    protected function setAllowCredentials($req, $rsp) { 
     if (isset($this->settings['allowCredentials']) && $this->settings['allowCredentials'] === True) { 
      $rsp->header('Access-Control-Allow-Credentials', 'true'); 
     } 
    } 

    protected function setAllowMethods($req, $rsp) { 
     if (isset($this->settings['allowMethods'])) { 
      $allowMethods = $this->settings['allowMethods']; 
      if (is_array($allowMethods)) { 
       $allowMethods = implode(", ", $allowMethods); 
      } 

      $rsp->header('Access-Control-Allow-Methods', $allowMethods); 
     } 
    } 

    protected function setAllowHeaders($req, $rsp) { 
     if (isset($this->settings['allowHeaders'])) { 
      $allowHeaders = $this->settings['allowHeaders']; 
      if (is_array($allowHeaders)) { 
       $allowHeaders = implode(", ", $allowHeaders); 
      } 
     } 
     else { // Otherwise, use request headers 
      $allowHeaders = $req->header("Access-Control-Request-Headers"); 
     } 
     if (isset($allowHeaders)) { 
      $rsp->header('Access-Control-Allow-Headers', $allowHeaders); 
     } 
    } 

    protected function setCorsHeaders($req, $rsp) { 
     // http://www.html5rocks.com/static/images/cors_server_flowchart.png 
     // Pre-flight 
     if ($req->isMethod('OPTIONS')) { 
      $this->setOrigin($req, $rsp); 
      $this->setMaxAge($req, $rsp); 
      $this->setAllowCredentials($req, $rsp); 
      $this->setAllowMethods($req, $rsp); 
      $this->setAllowHeaders($req, $rsp); 
     } 
     else { 
      $this->setOrigin($req, $rsp); 
      $this->setExposeHeaders($req, $rsp); 
      $this->setAllowCredentials($req, $rsp); 
     } 
    } 
    /** 
    * Handle an incoming request. 
    * 
    * @param \Illuminate\Http\Request $request 
    * @param \Closure $next 
    * @return mixed 
    */ 
    public function handle($request, Closure $next) { 
     if ($request->isMethod('OPTIONS')) { 
      $response = new Response("", 200); 
     } 
     else { 
      $response = $next($request); 
     } 
     $this->setCorsHeaders($request, $response); 
     return $response; 
    } 
} 

ロードミドルウェア$app->routeMiddlewareセクションでは、CorsMiddleware

Route::group(['middleware' => 'CorsMiddleware'], function($router){ 
    $app->post('/auth/login', function() { 
     return response()->json([ 
      'message' => 'CORS OPTIONS Accepted.', 
     ]); 
    }); 
} 
+0

この回答はルーメンでも適用されます5.5 – Puneee

+0

実際に動作します!ありがたいことに、私たちは多くのオプションとライブラリを試していますが、これは簡単で機能します。 – UlyssesMarx

+0

あなたの答えがあればそれを受け入れることができます:)。 – Puneee

1

あなたがここに統合するための有用な例を200コード を返すべきである簡単なOPTIONSハンドラを追加することができます

https://gist.github.com/danharper/06d2386f0b826b669552

+0

をチェックし、グループ内のすべてのアプリケーションのURLを保持し、私はそれを試みたが、今私は、「301は永久に移動」を得るが、他の作品に良い。 – UlyssesMarx

関連する問題