解析thinkphp withCredentials跨域問題解決思路-ThinkPHP-PHP中文網

thinkphp withCredentials 跨域問題解決思路

#跨域是什麼這裡就不細講, 這裡主要是thinkphp5.1, 說一下大概的解決思路

首先,因為前端是自己寫的, 在

axios

配置中, 我設定瞭如下

withCredentials: true // 跨域請求時發送cookie

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

登入後複製

在後端的設定中,配置的是

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

登入後複製

故而拋出了這樣一個錯誤

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.

登入後複製

意思大概為設定withCredentials 為true 時, origin 是不允許為

的, origin必須設定為來源的位址

也就是http://a.com 請求http://b.com 的時候, http://a.com 必須設定origin 為http://b.com 才能透過

最後參閱設定如下

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

登入後複製

當然, 為* 的時候也可以這樣

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

登入後複製

先定義個中間件

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(&#39;&#39;, function (){
    ....
    这里写路由
    ....
})->middleware(['CrossDomain']);

登入後複製

然後又有一個新問題

因為如上是走的路由檔案,當請求的

url

匹配路由的時候, 會走跨域中間件,當大家都知道的是, delete 和put 等方法是會提前發起一個options請求的, 也就是無法匹配路由文件,無法走跨域中間件

故而:

##定義一個錯誤異常接管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 `抛出一个响应
}
...

登入後複製

以上是解析thinkphp withCredentials跨域問題解決思路的詳細內容。更多資訊請關注PHP中文網其他相關文章！