Laravel 跨域解決方案

  • 2020 年 2 月 12 日
  • 筆記

我們在用 laravel 進行開發的時候,特別是前後端完全分離的時候,由於前端項目運行在自己機器的指定端口 (也可能是其他人的機器) , 例如 localhost:8000 , 而 laravel 程序又運行在另一個端口,這樣就跨域了,而由於瀏覽器的同源策略,跨域請求是非法的。其實這個問題很好解決,只需要添加一個中間件就可以了。

  1. 新建一個中間件 php artisan make:middleware EnableCrossRequestMiddleware
  2. 書寫中間件內容
    1. <?php
    2. namespace AppHttpMiddleware;
    3. use Closure;
    4. class EnableCrossRequestMiddleware
    5. {
    6. /**
    7. * Handle an incoming request.
    8. *
    9. * @param IlluminateHttpRequest $request
    10. * @param Closure $next
    11. * @return mixed
    12. */
    13. public function handle($request, Closure $next)
    14. {
    15. $response = $next($request);
    16. $origin = $request->server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : '';
    17. $allow_origin = [
    18. 'http://localhost:8000',
    19. ];
    20. if (in_array($origin, $allow_origin)) {
    21. $response->header('Access-Control-Allow-Origin', $origin);
    22. $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN');
    23. $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
    24. $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
    25. $response->header('Access-Control-Allow-Credentials', 'true');
    26. }
    27. return $response;
    28. }
    29. }

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

  3. 然後在內核文件註冊該中間件
    1. protected $middleware = [
    2. // more
    3. AppHttpMiddlewareEnableCrossRequestMiddleware::class,
    4. ];

    在 AppHttpKernel 類的 $middleware 屬性添加,這裡註冊的中間件屬於全局中間件

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