laravel 跨域解決方案

咱們在用 laravel 進行開發的時候,特別是先後端徹底分離的時候,因爲前端項目運行在本身機器的指定端口(也多是其餘人的機器) , 例如 localhost:8000 , 而 laravel 程序又運行在另外一個端口,這樣就跨域了,而因爲瀏覽器的同源策略,跨域請求是非法的。其實這個問題很好解決,只須要添加一箇中間件就能夠了。php

  1. 新建一箇中間件前端

    php artisan make:middleware EnableCrossRequestMiddleware
  2. 書寫中間件內容laravel

    <?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 屬性添加,這裏註冊的中間件屬於全局中間件數組

而後你就會發現前端頁面已經能夠發送跨域請求了。瀏覽器

會多出一次 methodoptions 的請求是正常的,由於瀏覽器要先判斷該服務器是否容許該跨域請求。服務器

相關文章
相關標籤/搜索