Laravel 跨域解决方案

2018-08-16 16:10:43

我们在用 laravel 进行开发的时候,特别是前后端完全分离的时候,由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) , 例如 localhost:8000 , 而 laravel 程序又运行在另一个端口,这样就跨域了,而由于浏览器的同源策略,跨域请求是非法的。其实这个问题很好解决,只需要添加一个中间件就可以了。

  1. 新建一个中间件

    php artisan make:middleware EnableCrossRequestMiddleware
  2. 书写中间件内容

    <?phpnamespace 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 的请求是正常的,因为浏览器要先判断该服务器是否允许该跨域请求。

  • 2020-02-19 23:15:24

    PHP 闭包(Closure)

    闭包(Closure)又叫做匿名函数,也就是没有定义名字的函数。比如下面的例子:

  • 2020-02-19 23:26:58

    php array_pop 删除数组最后一个元素实例

    php array_pop函数将数组最后一个单元弹出(出栈),即删除数组的最后一个元素。本文章通过php实例向大家讲解array_pop函数的使用方法。

  • 2020-02-20 18:35:21

    Vue加载组件、动态加载组件的几种方式

    组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。