博客

今天使用 Vue 加 axios，做一个小应用，向 ThinkPHP6 的后台发起请求，但是在控制器里加 header 参数，跨域一直不成功，十分郁闷，于是自己写了一个单独的文件测试，在 header 里配置响应头是有用的，如下：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

所以估计是在 ThinkPHP6 控制器之前，header 设置已经被拦截。

于是把响应头配置放在入口文件的头部，也是可以的，但是带来的问题是，所有控制器都开启跨域，这个肯定是不行的，所以在网上查找，可以利用 ThinkPHP6 的中间件来实现跨域，这样就比较好控制那些控制器开放跨域了，实现如下：

首先是要生成中间件，在命令行模式下输入：

php think make:middleware Cores

如果是多应用模式，还可以在应用里生成

在最末的控制层创建文件。middleware.php和mimiddleware文件夹


一定要在最后的控制层，否则不生效

定义中间件

<?php
// 全局中间件定义文件
return [
    // 全局请求缓存
    // \think\middleware\CheckRequestCache::class,
    // 多语言加载
    // \think\middleware\LoadLangPack::class,
    // Session初始化
    // \think\middleware\SessionInit::class
    app\api\middleware\Cores::class,
];

在middleware目录创建Cores.php

<?php
namespace app\api\middleware;

class Cores
{
    public function handle($request, \Closure $next)
    {
        $response = $next($request);
        $origin = $request->header('Origin', '');

        //OPTIONS请求返回204请求
        if ($request->method(true) === 'OPTIONS') {
            $response->code(204);
        }
        $response->header([
            'Access-Control-Allow-Origin'      => $origin,
            'Access-Control-Allow-Methods'     => 'GET,POST,PUT',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Allow-Headers'     => '*',
        ]);

        return $response;
    }
    /*
     * 中间结束调度
     */
}

以上是多应用下的使用方法，

也可以使用官方的配置，就更简单了，直接在

pp\middleware.php

文件中，引入内置中间件即可

<?php
// 全局中间件定义文件
return [
    // 全局请求缓存
    // \think\middleware\CheckRequestCache::class,
    // 多语言加载
    // \think\middleware\LoadLangPack::class,
    // Session初始化
    // \think\middleware\SessionInit::class,

    // 允许跨域请求
    \think\middleware\AllowCrossDomain::class
];

跨域请求成功。

官方文档里还可以在路由里实现跨域，暂时没有测试！