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

Analysis of thinkphp withCredentials cross-domain problem solving ideas

藏色散人

Release： 2021-02-17 09:22:29

forward

2135 people have browsed it

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
})

Copy after login

In the backend configuration,

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

Copy after login

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.

Copy after login

, 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');

Copy after login

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');

Copy after login

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);
    }
}

Copy after login

router.php

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

Copy after login

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 `抛出一个响应
}
...

Copy after login

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!