Flutter发布版Access-Control-Request-Headers未传头值问题

你在发布版本网络面板看到的带Access-Control-Request-Headers、Access-Control-Request-Method字段的请求，并非代码中发起的GET业务请求，而是浏览器自动触发的CORS跨域预检OPTIONS请求。

• Debug环境运行正常是因为Flutter Web调试模式默认对内置调试浏览器做了跨域绕过处理，禁用了CORS校验规则，不会触发预检请求，自定义请求头可以直接携带发送。
• 发布构建版本运行在标准浏览器安全规则下，跨域请求携带自定义请求头时，浏览器会自动先发送OPTIONS预检请求，询问后端是否允许当前源携带对应自定义头、使用对应请求方法访问接口。你当前的后端服务没有正确响应这个预检请求，浏览器判定跨域校验不通过，直接拦截了后续真正携带参数的GET业务请求，因此你只能看到不带参数值的预检请求头。

额外说明：Access-Control-Allow-Origin是后端返回给浏览器的响应头，前端将其加在请求头中没有任何实际作用，反而会额外增加预检请求的校验项，属于错误写法。

前端侧调整 #

• 删除请求头配置中的'Access-Control-Allow-Origin': '*'项，避免不必要的预检校验。
• 本地测试发布构建版本时，可通过启动参数临时禁用浏览器CORS校验，仅用于本地调试，不解决生产环境问题：

flutter run -d chrome --web-browser-flag "--disable-web-security"

后端侧调整（生产环境必须配置） #

CORS校验的控制权完全在后端，生产环境必须由后端做对应配置才能彻底解决问题：

1. 放行所有接口的OPTIONS方法请求，返回2xx状态码，不得对OPTIONS请求做鉴权拦截、返回4xx/5xx错误。
2. 给所有接口响应（包含OPTIONS预检响应、实际业务响应）添加符合规范的CORS响应头：
   • Access-Control-Allow-Origin：测试环境可临时配置为*允许所有源访问，生产环境建议配置为具体业务域名
   • Access-Control-Allow-Methods: GET, POST, OPTIONS（覆盖业务实际用到的所有请求方法）
   • Access-Control-Allow-Headers: APIKey, customer_id（覆盖前端实际传递的所有自定义请求头，名称需完全匹配）
   • 若接口需要携带Cookie等身份凭证，需额外添加Access-Control-Allow-Credentials: true，此时Access-Control-Allow-Origin不能设置为*，必须指定具体允许的源地址。

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