thinkphp5+mui跨域请求实现

本篇笔记为大家分享下thinkphp5与mui前端框架开发中的跨域解决方法。其实在写接口方面，市场上有很多专门用来写接口的开发框架，thinkphp5不似5.1已经内置了跨域请求的处理，因此就需要我们单独实现一下。

效果预览图：

想要实现跨域请求，首先需要明白的是CROS同源策略，这个波波不去分享，百度一下教程很多。我们需要明白的一点就是这个必须通过服务器接口端设置header来实现。下面我们看下CORS请求的整个流程。

其次需要明白的一点就是前端在发起POST请求时会先发送一个options请求，来判断服务器端资源是否允许跨域。因此基于以上两点我们来实现TP5的跨域。

首先我们封装一个BasicApi的控制器，源码大致如下：

class BasicApi extends Controller
{
/**
* 访问请求对象
* @var Request
*/
public $request;
/**
* 当前访问身份
* @var string
*/
public $token;
/*
* 用户信息
*/
public $UserInfo;
/**
* 基础接口SDK
* @param Request|null $request
*/
public function __construct(Request $request = null)
{
// 输入对象
ToolsService::corsRequestHander();
$this->request = is_null($request) ? Request::instance() : $request;
if(!$this->request->isPost()){
$this->response(1,"不合法的请求方式");
}
}
/**
* 输出返回数据
* @param string $msg 提示消息内容
* @param string $code 业务状态码
* @param mixed $data 要返回的数据
* @param string $type 返回类型 JSON XML
* @return Response
*/
public function response($code = 'SUCCESS',$msg, $data = [], $type = 'json')
{
$result = ['code' => $code,'msg' => $msg, 'data' => $data, 'type' => strtolower($type)];
$response = Response::create($result, $type)->header(ToolsService::corsRequestHander())->code(200);
return $response->send();
}
}

我的所有接口是禁止除POST请求之外的其他类型请求的，大家若复制代码的话可删除相关判断。中间有一个ToolsService::corsRequestHander(); 同源检测，同源检测的代码如下：

/**
* Cors Options 授权处理
*/
public static function corsOptionsHandler()
{
if (request()->isOptions()) {
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Headers:Accept,Referer,Host,Keep-Alive,User-Agent,X-Requested-With,Cache-Control,Content-Type,Cookie,token');
header('Access-Control-Allow-Credentials:true');
header('Access-Control-Allow-Methods:GET,POST,OPTIONS');
header('Access-Control-Max-Age:1728000');
header('Content-Type:text/plain charset=UTF-8');
header('Content-Length: 0', true);
header('status: 204');
header('HTTP/1.0 204 No Content');
}else{
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Headers:Accept,Referer,Host,Keep-Alive,User-Agent,X-Requested-With,Cache-Control,Content-Type,Cookie,token');
header('Access-Control-Allow-Credentials:true');
header('Access-Control-Allow-Methods:GET,POST,OPTIONS');
}
}