Vue请求Laravel接口出现NETWORK ERR CORS错误，配置fruitcake包仍未解决

1. 修正cors配置冲突与遗漏 #

• 首先修正allowed_origins配置：由于你开启了supports_credentials => true，CORS规范不允许同时使用*作为允许来源，必须显式指定允许跨域的域名，修改config/cors.php对应配置：

'allowed_origins' => ['https://www.a.com'],
// 如果有多个允许来源可以全部列在这里，也可以用allowed_origins_patterns做正则匹配

• 修正paths匹配规则：当前你只配置了api/authenticate单一路径，容易出现匹配遗漏，建议直接覆盖所有接口路径：

'paths' => ['api/*'],
// 若需要严格限定路径可以写成 ['api/login', 'api/authenticate']

修改完成后执行php artisan config:clear清除服务端的配置缓存，避免旧配置生效。

2. 排查预检请求被拦截问题 #

你故障接口的响应头没有任何CORS相关字段，说明请求在到达CORS中间件之前就被拦截返回，排查方向：

• 确认全局中间件顺序：你贴出的中间件配置中HandleCors已经放在第一位，确认服务端部署的代码和本地一致，没有其他前置中间件（比如权限、限流中间件）在全局优先级高于CORS中间件，提前返回错误响应导致CORS头没有被注入。
• Apache服务器放行OPTIONS请求：你使用的Apache服务默认会拦截OPTIONS请求不转发到Laravel处理，在public/.htaccess文件中添加以下规则：

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

添加完成后重启Apache服务生效。

• 确认域名对应服务配置：你控制台报错显示请求的目标域名是https://www.b.com/api/authenticate，确认该域名对应的服务已经部署了更新后的CORS配置，避免配置错服务。

3. 本地复现方法 #

你可以通过以下方式在本地复现故障定位根因：

• 打开Chrome浏览器开发者工具的网络面板，勾选「禁用缓存」，手动修改接口请求的Origin请求头为https://www.a.com模拟跨域请求
• 本地启动前端服务，配置和线上一致的域名端口，直接请求线上接口复现跨域错误

内容的提问来源于stack exchange，提问作者Aadesh Dhakal