引用

我在使用thinkphp6写后端接口时。在postman中可以正常获取接口数据。但是在前端用ajax请求接口时就会产生问题。我搜索原因时,才知道有跨域这一说。

为什么会跨域

因为浏览器的同源政策,就会产生跨域。

1、浏览器限制

2、跨域(协议,域名,端口不一样都是跨域)

3、XHR(XMLHttpRequest请求)

同时满足三个条件才有可能产生跨域问题。

解决跨域
  1. 在tp6框架中的开启中间件app/middleware.php并且在中间件里加入该代码:
1
\think\middleware\AllowCrossDomain::class
  1. 或者是经典解决方案,在tp6入口文件public/index.php中添加一下几行代码:
1
2
3
4
//设置跨域请求
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');
  1. 自写一个类。放进全局中间件中。

    • 这个方法相当于把自带的全局中间件剥离数据出来。但是可以自定义接收的数据]
    1. 终端中使用命令 新建生成一个Cross中间件

      php think run make:middleware Cross
    2. 设置跨域

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    * 设置跨域
    * @param $request
    * @param \Closure $next
    * @return mixed|void
    */
    public function handle($request, \Closure $next)
    {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Max-Age: 1800');
    header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
    header('Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With, Token');
    if (strtoupper($request->method()) == "OPTIONS") {
    return Response::create()->send();
    }
    return $next($request);
    }
    1. 在app下的middleware.php中使用中间件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <?php
    // 全局中间件定义文件
    return [
    // 全局请求缓存
    // \think\middleware\CheckRequestCache::class,
    // 多语言加载
    // \think\middleware\LoadLangPack::class,
    // Session初始化
    // \think\middleware\SessionInit::class
    //解决跨域问题 自定义Cross中间件
    \app\middleware\Cross::class
    ];