lumen8:lumen或laravel跨域解决方案

最新推荐文章于 2024-06-26 16:25:01 发布

ufan94

最新推荐文章于 2024-06-26 16:25:01 发布

阅读量2.5k

点赞数 1

分类专栏： lumen

本文链接：https://blog.youkuaiyun.com/ufan94/article/details/82500737

版权

lumen 专栏收录该内容

7 篇文章

订阅专栏

链接地址：https://laravel-china.org/articles/6504/laravel-cross-domain-solution

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

一开始是在http://127.0.0.1:8080中ajax请求 http://127.0.0.1:8000/api/login中的内容，报错header头问题

这里写图片描述

1。新建一个中间件

在app/http/middlemare中新建一个CorsMiddleware.php

2。书写中间件内容

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Response;

class CorsMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $headers = [
            'Access-Control-Allow-Origin' => getenv('ACCESS_CONTROL_ALLOW_ORIGIN'),
            'Access-Control-Allow-Methods' => getenv('ACCESS_CONTROL_ALLOW_METHODS'),
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age' => '86400',
            'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With'
        ];

        if ($request->isMethod('OPTIONS')) {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }

        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }

        return $response;
    }
}

3。在.env文件中自定义允许的请求头

#跨域请求参数
ACCESS_CONTROL_ALLOW_ORIGIN=*
ACCESS_CONTROL_ALLOW_METHODS='GET, POST, PUT, DELETE, OPTIONS'

4。然后在内核文件注册该中间件
【ps：在bootstrap中的app.php中把相应的注释去掉并修改成现在这个新建的中间件就可以了】

 $app->middleware([
    App\Http\Middleware\CorsMiddleware::class
 ]);

结果：
一开始的问题再次请求：

请求页面代码：

<script src="jquery.js"></script>
<script>
    $(document).ready(function(){

        $.ajax({
            type: "POST",//或者"POST"
            //url: "http://www.crmserver.com:8080/api/washer_batch_insert/3",//请求地址
            url: "http://localhost:8000/api/login",//请求地址
            data: {'phone':13522474350,'password':123},//传入后台的参数
            // dataType: "JSONP",
            success: function(data){
            console.log(data);

            }//回调函数,请求成功后执行的函数,data为后台传来的数据

        });



    });
</script>

请求结果：
这里写图片描述