现在开发一个聊天室,聊天室客户端是独立在一个服务器上,而接口部分是以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发送的数据格式以及编码一定要和接口端对应,否则即使处理成功,返回的数据也会出现在请求错误的状态之中。