解决lumen和ajax跨域请求问题

现在开发一个聊天室,聊天室客户端是独立在一个服务器上,而接口部分是以lumen框架开发,想要快速在聊天页面初始化的时候获取聊天记录列表,直接ajax跨域无疑是最简单的方法。

根据官方文档https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

前台跨域post请求,由于CORS(cross origin resource share)规范的存在,浏览器会首先发送一次options嗅探,同时header带上origin,判断是否有跨域请求权限,服务器响应access control allow origin的值,供浏览器与origin匹配,如果匹配则正式发送post请求。

根据lumen框架的特点,我们可以写一个中间件,然后在配置路由访问控制器的时候,先进行处理,设置Access-Control-Allow-Origin,规定好可以跨域请求本接口的站点。

/**

* 处理ajax跨域

*/

namespace App\Http\Middleware;

use Illuminate\Http\Request;

use Illuminate\Http\Response;

class CorsMiddleware

{

private $headers;

    private $allow_origin;

    public function handle(Request $request, \Closure $next)

    {

    $this->headers =

    [

    'Access-Control-Allow-Methods' => 'POST,GET,OPTIONS,DELETE',

    'Access-Control-Allow-Headers' => $request->header('Access-Control-Request-Headers'),

    'Content-Type' => 'text/html; charset=utf-8',

    'Access-Control-Allow-Credentials' => 'true',//允许客户端发送cookie

    'Access-Control-Max-Age' => 1728000 //该字段可选,用来指定本次预检请求的有效期,在此期间,不用发出另一条预检请求。

    ];

    //设置有效请求来源

    $this->allow_origin =

    [

    'http://chat.riluozhiguo.cn'

    ];

    $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';

    //如果origin不在允许列表内,直接返回403

    if (!in_array($origin,$this->allow_origin)) {

    return new Response('Forbidden', 403);

    }

    $this->setCorsHeaders($origin);

    //如果是初次请求直接终止

    if ($request->isMethod('options')) {

    return ;

    }

    $response = $next($request);   


        return $response;

    }

    /**

    * 设置Access-Control-Allow-Origin

    * Typecho Blog Platform

    * @copyright [copyright]

    * @license  [license]

    * @version  [version]

    * @param    [type]      $response [description]

    * @param    [type]      $origin  [description]

    */

    public function setCorsHeaders($origin)

    {

    foreach ($this->headers as $key => $value) {

            header($key.':'.$value);

        }

        if (in_array($origin, $this->allow_origin)) {

            header('Access-Control-Allow-Origin:'.$origin);

        }

    }

}

不过这里要注意,客户端ajax发送的数据格式以及编码一定要和接口端对应,否则即使处理成功,返回的数据也会出现在请求错误的状态之中。

你可能感兴趣的:(解决lumen和ajax跨域请求问题)