Je n'entrerai pas ici dans les détails de ce qu'est le cross-domain. L'objectif principal ici est thinkphp5.1, parlons-en. l'idée générale de la solution
Tout d'abord, parce que le front-end est écrit par moi-même, dans la configuration axios, j'ai défini ce qui suit
withCredentials : true // Envoyer un cookie lors du croisement -demande de domaine
// 创建一个axios
const service = axios.create({
baseURL: URL ,
withCredentials: true, // 跨域请求时发送cookie
timeout: 5000 // request timeout
})
dans la configuration back-end, la configuration est
header("Access-Control-Allow-Origin: *");
, donc une telle erreur
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.
est générée, ce qui signifie que lors de la configuration de withCredentials à true, l'origine ne peut pas être *, l'origine doit être définie comme adresse source
c'est-à-dire lorsque http://a.com demande http://b.com, http : //a.com doit définir l'origine sur http://b.com. Grâce à
, la configuration finale de référence est la suivante
$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');
Bien sûr, cela peut aussi être comme ça quand c'est *
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');
Définissez d'abord un middleware php think make:middleware CrossDomain
<?php namespace app\http\middleware;
use think\Response;
class CrossDomain
{
public function handle($request, \Closure $next)
{
$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');
return $next($request);
}
} dans router.php dans
Route::group('', function (){
....
这里写路由
....
})->middleware(['CrossDomain']);Puis il y a un nouveau problème
Parce que le ci-dessus est le fichier de routage, lorsque le url demandé correspond à l'itinéraire, le middleware inter-domaines sera utilisé Quand Comme nous le savons tous, des méthodes telles que delete et put lanceront une demande d'options à l'avance, ce qui signifie que le routage. le fichier ne peut pas être mis en correspondance et le middleware inter-domaines ne peut pas être utilisé
Par conséquent :
Définir une prise de contrôle d'exception d'erreur 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 `抛出一个响应
}
...est terminé.
