Vue3调用Laravel接口POST请求报CORS预检重定向错误如何解决

问题根因 #

你遇到的CORS报错核心原因是预检OPTIONS请求被服务端重定向了，浏览器CORS规范明确要求预检请求不能接收3xx重定向响应，同时你现有的CORS配置本身存在规则冲突。

修复步骤 #

1. 修正CORS配置冲突 #

你当前config/cors.php中同时设置了allowed_origins = ['*']和supports_credentials = true，这是不符合浏览器CORS规范的：只要请求携带凭证（Cookie、HTTP认证信息等），Access-Control-Allow-Origin响应头就不能使用通配符*，必须指定明确的允许访问域名。

修改config/cors.php对应配置项：

<?php
return [
    // 其余配置保持不变
    // 把通配符替换成你实际的前端域名
    'allowed_origins' => ['https://vue.tatrytec.eu'],
    // 如果有多个域名需要允许，也可以用正则匹配规则
    // 'allowed_origins_patterns' => ['/^https?:\/\/.*\.tatrytec\.eu$/'],
];

修改完成后执行php artisan config:cache清除配置缓存即可生效。

2. 解决预检请求重定向问题 #

90%以上的这类报错都是路由路径结尾斜杠不匹配导致的：你前端请求的接口路径结尾带斜杠，但Laravel路由定义的路径结尾不带斜杠，或者反过来，Laravel默认的路由重定向机制会自动把斜杠不匹配的请求做301重定向，OPTIONS预检请求被重定向就会触发CORS报错。

两种修复方案二选一即可：

• 方案1：前端请求的接口路径和后端路由定义的路径保持斜杠规则统一，要么都带要么都不带
• 方案2：修改路径重定向中间件，跳过OPTIONS请求的自动重定向逻辑

3. 确认中间件优先级 #

你当前已经把\Fruitcake\Cors\HandleCors::class放在全局中间件的最顶部，这个配置是正确的，确保所有请求（包括OPTIONS预检请求）都会先经过CORS中间件处理，不会出现其他中间件返回响应时没携带CORS头的问题。

额外排查点 #

如果修改后仍有报错，可以进一步检查：

• 你的store方法中是否有返回重定向的逻辑？API接口应该返回JSON响应，不能返回redirect()类的重定向响应
• 如果你用了身份认证组件，确认前端POST请求是否正确携带了要求的认证请求头

内容的提问来源于stack exchange，提问作者Čamo