报错：Access to XMLHttpRequest at 'http://www.e.com/api/v1.index/index?t=1735897901267' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
实现目标：只要http://www.e.com/api/网址开关都充许跨域访问
像
http://www.e.com/api/xxx1
http://www.e.com/api/captchaController/generate
.....
不要一个一个接口写，希望有一个通用方法
跨域访问，都要发送 OPTIONS 请求
-
response()->code(204)返回一个空的 HTTP 204 响应，这是处理 OPTIONS 请求的标准做法。
①是的OPTIONS 请求
③④是①OPTIONS 请求一定要返回的,不然不行
②是真实的请求
方法一：前端发起请求：不允许跨域携带cookie
1.0 前端发起请求代码
重点是这里：withCredentials: false // 不允许跨域携带cookie
$.ajax({url: API.baseUrl + API.verifyCode2 + '?t=' + new Date().getTime(),type: 'GET',xhrFields: {withCredentials: false // 不允许跨域携带cookie},beforeSend: function(xhr) {// 添加自定义请求头xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');},success: function(data) {$('#verifyImg').attr('src', data.captcha);verifyToken = data.token;},error: function(xhr, status, error) {console.error('获取验证码失败:', error);layer.msg('获取验证码失败，请刷新重试');}});Tp8代码：
1.1 创建app\middleware/CorsMiddle.php代码
<?php
namespace app\middleware;class CorsMiddle
{public function handle($request, \Closure $next){header('Access-Control-Allow-Origin: *'); // 或者指定具体域名 header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS'); header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With'); header('Access-Control-Allow-Credentials: true'); if ($request->method() === 'OPTIONS') { return response()->code(204); } return $next($request); }
}1.2 在app/middleware.php中加入
\app\middleware\CorsMiddle::class,
1.3 修改route/app.php的代码
// 处理 OPTIONS 预检请求
Route::options('api/*', function () { return response()->code(204);
})->middleware(\app\middleware\CorsMiddle::class); // 定义 API 路由组
Route::group('api', function () {
})->middleware(\app\middleware\CorsMiddle::class);方法二：前端发起请求：允许跨域携带cookie
服务器的 Access-Control-Allow-Origin 必须是具体的域名，而不能是 *
2.1 前端发起请求
2.2 其它的TP代码是和方法一一样的，只要修改2.3步就行
2.3 修改app\middleware/CorsMiddle.php代码
<?php
namespace app\middleware;class CorsMiddle
{public function handle($request, \Closure $next){// 从配置文件中获取允许的域名列表// 允许的源 $allowedOrigins = [ 'http://127.0.0.1:5500', // 本地开发环境地址 'http://localhost:5500', // 本地地址 'http://www.example.com', // 其他允许的域名 ]; $origin = $request->header('Origin');if (in_array($origin, $allowedOrigins)) {header('Access-Control-Allow-Origin: '. $origin);} else {// 处理不允许的来源，例如返回403错误return response()->code(403)->data(['message' => 'Forbidden']);}header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');header('Access-Control-Allow-Credentials: true');if ($request->method() === 'OPTIONS') {return response()->code(204);}return $next($request);}
} $allowedOrigins = [
'http://127.0.0.1:5500', // 本地开发环境地址
'http://localhost:5500', // 本地地址
'http://www.example.com', // 其他允许的域名
];
设置允许跨域的域名从配置文件中读取域名
2.4 改为在.env文件中读取
在.env文件加,然后修改app\middleware/CorsMiddle.php代码
#充许前端API跨域域名访问在这里设置 特别是前后端分离的 可以设置多个用逗号隔开
CORS_ALLOWED_ORIGINS=http://127.0.0.1:5500,http://www.e.com<?php
namespace app\middleware;class CorsMiddle
{public function handle($request, \Closure $next){// 从配置文件中获取允许的域名列表// 允许的源 // $allowedOrigins = [ // 'http://127.0.0.1:5500', // 本地开发环境地址 // 'http://localhost:5500', // 本地地址 // 'http://www.example.com', // 其他允许的域名 // ]; // 从.env文件读取配置并转换为数组$allowedOriginsStr = env('CORS_ALLOWED_ORIGINS', '');$allowedOrigins = explode(',', $allowedOriginsStr);$origin = $request->header('Origin');if (in_array($origin, $allowedOrigins)) {header('Access-Control-Allow-Origin: '. $origin);} else {// 处理不允许的来源，例如返回403错误return response()->code(403)->data(['message' => 'Forbidden']);}header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');header('Access-Control-Allow-Credentials: true');if ($request->method() === 'OPTIONS') {return response()->code(204);}return $next($request);}
}
