Laravel 跨域解決方案

qbhy發表於2017-10-26
Laravel跨域

我們在用 laravel 進行開發的時候，特別是前後端完全分離的時候，由於前端專案執行在自己機器的指定埠(也可能是其他人的機器) ， 例如 localhost:8000 , 而 laravel 程式又執行在另一個埠，這樣就跨域了，而由於瀏覽器的同源策略，跨域請求是非法的。其實這個問題很好解決，只需要新增一箇中介軟體就可以了。

  1. 新建一箇中介軟體 
    php artisan make:middleware EnableCrossRequestMiddleware
  2. 書寫中介軟體內容 
    <?php
namespace App\Http\Middleware;
use Closure;
class EnableCrossRequestMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $origin = $request->server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : '';
        $allow_origin = [
            'http://localhost:8000',
        ];
        if (in_array($origin, $allow_origin)) {
            $response->header('Access-Control-Allow-Origin', $origin);
            $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN');
            $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
            $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
            $response->header('Access-Control-Allow-Credentials', 'true');
        }
        return $response;
    }
}

    $allow_origin 陣列變數就是你允許跨域的列表了，可自行修改。

  3. 然後在核心檔案註冊該中介軟體 
        protected $middleware = [
        // more
        App\Http\Middleware\EnableCrossRequestMiddleware::class,
    ];

    在 App\Http\Kernel 類的 $middleware 屬性新增，這裡註冊的中介軟體屬於全域性中介軟體。

然後你就會發現前端頁面已經可以傳送跨域請求了。

會多出一次 method 為 options 的請求是正常的，因為瀏覽器要先判斷該伺服器是否允許該跨域請求。

補充

有時候返回的不是 laravel 的 response 物件而是 Symfony 的 response，所以會報 $response->header 方法找不到，所以新增 header 的方法要簡單改一下, 可以拼好一個陣列直接呼叫一次，我這裡是懶得改了。

$response->headers->add(['Access-Control-Allow-Origin' => $origin]);
$response->headers->add(['Access-Control-Allow-Headers' => 'Origin, Content-Type, Cookie,X-CSRF-TOKEN, Accept,Authorization']);
$response->headers->add(['Access-Control-Expose-Headers' => 'Authorization,authenticated']);
$response->headers->add(['Access-Control-Allow-Methods' => 'GET, POST, PATCH, PUT, OPTIONS']);
$response->headers->add(['Access-Control-Allow-Credentials' => 'true']);

補充 2

另外需要注意的是，lumen 框架直接新增這個 中介軟體是不行的，妥妥的報 options 路由找不到，因為 lumen 用的是 fast-route 路由元件，跟 laravel 的不是同一個，laravel 可以是因為它幫你做了這件事 ,所以我們要自己註冊一個 options路由, 大致程式碼如下: 

$app->router->group([
    'prefix'     => 'api',
    'middleware' => ['cross','api'],
], function ($router) {
    $router->options('/{path:.*}', function ($path) {});
    require __DIR__ . '/../routes/api.php';
});

bootstrap/app.php

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章