TP8 前后端跨域访问请求API接口解决办法

报错：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=127.0.0.1:5500,www.e.com

<?php
namespace app\middleware;class CorsMiddle
{public function handle($request, \Closure $next){// 从 .env 文件读取配置并转换为数组$allowedOriginsStr = env('CORS_ALLOWED_ORIGINS', '');$allowedOrigins = explode(',', $allowedOriginsStr);// 补全域名（添加 http:// 或 https://）$allowedOrigins = array_map(function($origin) {// 去掉多余的空格$origin = trim($origin);// 如果域名没有以 http:// 或 https:// 开头，则补全为 http://if (!preg_match('/^https?:\/\//', $origin)) {$origin = 'http://' . $origin;}return $origin;}, $allowedOrigins);// 获取请求的 Origin$origin = $request->header('Origin');// 检查 Origin 是否在允许的域名列表中if (in_array($origin, $allowedOrigins)) {// 允许跨域请求header('Access-Control-Allow-Origin: ' . $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');// 处理 OPTIONS 预检请求if ($request->method() === 'OPTIONS') {return response()->code(204);}}// 继续处理请求return $next($request);}
}