Flutter移动端GET请求正常Web端报405错误，求排查建议

移动端Flutter应用调用Laravel API的GET请求完全正常，但Flutter Web端发起相同请求时返回405（Method Not Allowed）错误，Postman测试该GET请求无问题，怀疑是CORS配置导致的差异。当前Laravel的CORS配置如下：

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
//'allowed_headers' => ['*'],
'allowed_headers' => ['Content-Type', 'X-Requested-With', 'Authorization'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,

差异原因 #

移动端（iOS/Android）直接发起HTTP请求，不会触发浏览器的跨域预检机制；而Flutter Web运行在浏览器环境下，浏览器会对跨域请求先发送OPTIONS预检请求，只有当服务器正确响应OPTIONS请求、确认允许跨域后，才会发送实际的GET请求。如果OPTIONS请求返回405，浏览器会直接拦截后续GET请求，前端捕获到的就是405错误（实际是预检请求失败）。

排查步骤 #

• 检查预检请求状态：打开浏览器开发者工具（F12）→ Network标签，重新发送请求，查看是否存在OPTIONS请求。如果该请求返回405，问题根源是预检请求未被正确处理，而非GET请求本身。
• 确认CORS中间件全局启用：检查app/Http/Kernel.php，确保$middleware数组包含\Fruitcake\Cors\HandleCors::class。如果仅在$middlewareGroups['api']中添加，OPTIONS请求可能在到达API路由组前就被拦截，导致无法触发CORS处理。
• 调整allowed_headers配置：当前注释掉了['*']并指定了部分头部，但浏览器预检请求可能携带未列出的自定义头。建议暂时恢复allowed_headers => ['*']测试，若问题解决，再根据实际使用的请求头逐步缩小范围。
• 核对路由请求方法：确认Flutter Web的请求URL、方法与移动端完全一致，避免因URL拼写错误、误写请求方法（如把GET写成POST），导致匹配到其他仅允许POST的路由，返回405。
• 检查supports_credentials配置：若请求需要携带Cookie（如使用Sanctum认证），需将supports_credentials设为true，同时Flutter Web请求需开启withCredentials: true；若无需Cookie，确保两端配置一致，避免浏览器因凭证规则不匹配拦截请求。
• 排查服务器代理的CORS设置：如果Laravel前端有Nginx/Apache等反向代理，需确认代理服务器是否配置了独立的CORS规则。若代理返回的CORS头与Laravel配置冲突，会导致预检请求失败，需统一或禁用代理的CORS配置。

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