Analysis of thinkphp withCredentials cross-domain problem solving ideas-ThinkPHP-php.cn

I won’t go into details here about what cross-domain is. The main focus here is thinkphp5.1, and let’s talk about the general solution

First of all, because the front-end is written by myself, in the

axios configuration, I set the following

withCredentials: true // Send cookies during cross-domain requests

// 创建一个axios
const service = axios.create({
  baseURL: URL , 
  withCredentials: true, // 跨域请求时发送cookie
  timeout: 5000 // request timeout
})

In the backend configuration,

header("Access-Control-Allow-Origin: *");

is configured, so such an error is thrown

Access to XMLHttpRequest at 'http://store.ink/admin/me?sid=lbn3mpacfb3k1mbehnk9qh8kf3' from origin 'http://vue-admin-web.ink' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

, which means setting

withCredentials to true, origin is not allowed to be *, origin must be set to the source address

, that is, when http://a.com requests http://b.com , http://a.com must set the origin to http://b.com to pass

Finally refer to the configuration as follows

 $origin = $_SERVER['HTTP_ORIGIN'] ?? '*';
        header("Access-Control-Allow-Origin: $origin");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With');
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
        header('Access-Control-Max-Age: 1728000');

Of course, when it is * You can also do this

header("Access-Control-Allow-Origin: *");
        header('Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With');
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
        header('Access-Control-Max-Age: 1728000');

First define a middleware

php think make:middleware CrossDomain

<?php namespace app\http\middleware;

use think\Response;


class CrossDomain
{
    public function handle($request, \Closure $next)
    {
        $origin = $_SERVER[&#39;HTTP_ORIGIN&#39;] ?? &#39;*&#39;;
        header("Access-Control-Allow-Origin: $origin");
        header(&#39;Access-Control-Allow-Credentials: true&#39;);
        header(&#39;Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With&#39;);
        header(&#39;Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE&#39;);
        header(&#39;Access-Control-Max-Age: 1728000&#39;);

        return $next($request);
    }
}

router.php

Route::group('', function (){
    ....
    这里写路由
    ....
})->middleware(['CrossDomain']);

Then there is a new problem

Because the above is the routing file, when the requested

url matches the route, the cross-domain middleware will be used. As everyone knows, methods such as delete and put will initiate an options request in advance, which means that the routing file cannot be matched and cross-domain middleware cannot be used.

So:

define an Error exception takeover https://www.kancloud.cn/manual/thinkphp5_1/354092#_42

....
public function render(Exception $e)
{
    # 这里来处理跨域问题 
    $origin = $_SERVER['HTTP_ORIGIN'] ?? '*';
    header("Access-Control-Allow-Origin: $origin");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With');
    header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
    header('Access-Control-Max-Age: 1728000');
    $type = request()->isAjax() ? 'json' : "html";
    $response = \think\response\Json::create([], $type, 200, []);
    return $response; # response  // 在异常处理接管中,必须返回的是一个人response响应, 而不是 `throw new `抛出一个响应
}
...

is completed.

The above is the detailed content of Analysis of thinkphp withCredentials cross-domain problem solving ideas. For more information, please follow other related articles on the PHP Chinese website!