ThinkPHP 配置跨域请求，使用TP的内置跨域类配置，小程序和web网页跨域请求的区别及格式说明

TP 内置的跨域配置类 AllowCrossDomain

TP 框架提供的内置类： \think\middleware\AllowCrossDomain::class

开启跨域

  // 全局中间件定义文件
  return [
  // 全局请求缓存
  // \think\middleware\CheckRequestCache::class,
  // 多语言加载
  // \think\middleware\LoadLangPack::class,
  // Session初始化
  \think\middleware\SessionInit::class,
  // 全局注册 middleware token
  //     app\middleware\CheckToken::class
  // 跨域请求
  \think\middleware\AllowCrossDomain::class
  ];
1
2
3
4
5
6
7
8
9
10
11
12
13
14

跨域配置发生的问题

今天，在用ThinkPHP8做前后端分离配置跨域时，发现了一个小小的问题，就是我这块儿微信小程序发送token是完全正常的，但是使用web端网页发送请求它就会出现下面的错误
Access to XMLHttpRequest at 'http://robin.com/Article?pagesize=10&page=1&status=-1&author=&title=' from origin 'http://localhost:5173' has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.
因为我使用的是TP框架自带的跨域配置类 \think\middleware\AllowCrossDomain::class，然后去查看了一下它的源码，发现其中确实少掉了Origin token的支持

web端跨域问题解决

源码如下：

// +----------------------------------------------------------------------
// | ThinkPHP [ WE CAN DO IT JUST THINK ]
// +----------------------------------------------------------------------
// | Copyright (c) 2006~2023 http://thinkphp.cn All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: liu21st 
// +----------------------------------------------------------------------
declare(strict_types=1);

namespace think\middleware;

use Closure;
use think\Config;
use think\Request;
use think\Response;

/**
 * 跨域请求支持
 */
class AllowCrossDomain
{
    protected $cookieDomain;

    protected $header = [
        'Access-Control-Allow-Credentials' => 'true',
        'Access-Control-Max-Age'           => 1800,
        'Access-Control-Allow-Methods'     => 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
        // 此处就是 token 不支持设置的原因，因为配置项少了
        'Access-Control-Allow-Headers'     => 'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With',
    ];

    public function __construct(Config $config)
    {
        $this->cookieDomain = $config->get('cookie.domain', '');
    }

    /**
     * 允许跨域请求
     * @access public
     * @param Request $request
     * @param Closure $next
     * @param array   $header
     * @return Response
     */
    public function handle(Request $request, Closure $next, array $header = []): Response
    {
        $header = !empty($header) ? array_merge($this->header, $header) : $this->header;

        if (!isset($header['Access-Control-Allow-Origin'])) {
            $origin = $request->header('origin');

            if ($origin && ('' == $this->cookieDomain || str_contains($origin, $this->cookieDomain))) {
                $header['Access-Control-Allow-Origin'] = $origin;
            } else {
                $header['Access-Control-Allow-Origin'] = '*';
            }
        }

        return $next($request)->header($header);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

只需要将上面的请求头配置修改如下即可(添加上 Origin, token )：

'Access-Control-Allow-Headers'     => 'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With,Origin, token',
1

微信小程序和web的跨域请求格式区别

CORS（跨源资源共享）是一种更为现代和推荐的跨域解决方案。它通过服务器端设置响应头信息，允许来自不同源的客户端进行跨域请求。

1. 微信小程序跨域请求示例
   在微信小程序中，可以使用小程序提供的JS-SDK中的wx.request方法发起CORS请求

wx.request({  
  url: 'http://example.com/api', // 指定请求的URL地址  
  method: 'GET', // 指定请求方式  
  header: {  
    'Content-Type': 'application/json', // 设置请求头信息  
    'Access-Control-Allow-Origin': '*' // 设置允许跨域的源地址  
  },  
  success: function(res) {  
    // 请求成功后的回调函数  
    console.log(res.data)  
  },  
  fail: function(res) {  
    // 请求失败后的回调函数  
    console.log(res)  
  }  
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. web网页跨域请求后端配置
   在Web网页中，需要与服务端协商设置允许跨域的响应头信息，如下：

Access-Control-Allow-Origin: *  
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS  
Access-Control-Allow-Headers: Origin, Content-Type, X-Requested-With, token
1
2
3

4. web网页前端发送Axios跨域请求的请求拦截器配置
   一般前端发送请求，都是通过拦截器去对token进行一个封装。

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    let token = localStorage.getItem("token") ? JSON.parse(localStorage.getItem("token")) : ""
    if(token!=""){
        config.headers['token'] = token;  // 设置请求头
    }
    return config
}, error => {
    return Promise.reject(error)
});
1
2
3
4
5
6
7
8
9
10
11
12
13