VS Code调试时Fetch API出现OPTIONS请求及请求失败问题排查

问题现象 #

• 直接在Chrome浏览器运行Fetch API代码：执行正常，无OPTIONS请求
• 通过VS Code的F5启动调试运行相同代码：触发OPTIONS请求，且Fetch直接报“Failed to fetch”错误，控制台显示CORS失败提示
• 移除自定义请求头后，OPTIONS请求消失，但POST请求仍报错

相关代码 #

/* The commented out code passes a set of headers to the server. Testing
   and logic shows that the headers are not needed. */
if (1 == 2) {
  apiPromise = fetch(urlStr, { 
                               credentials: "include",
                               "method": "POST",
                               "headers": apiHeaders,
                               "body": apiJson
                             });
}
apiPromise = fetch(urlStr, { 
                             credentials: "include",
                             "method": "POST", 
                             "body": apiJson
                           });
/* Return the promise to the caller */
/* console.log(apiPromise); */
/* console.log(typeof (apiPromise)); */
return apiPromise;

原因分析 #

1. 运行环境的跨域规则差异
   直接在Chrome打开文件时，通常是file://协议，浏览器对这种本地文件的CORS限制会大幅放宽，不会触发预检OPTIONS请求。而VS Code调试时会启动内置HTTP服务器（比如http://localhost:xxxx）加载页面，此时请求目标域名和调试服务器域名不同，浏览器会严格执行CORS规则，触发OPTIONS预检请求。

2. 服务器端CORS配置缺失
   OPTIONS请求失败是因为服务器没有正确处理预检请求，浏览器判定跨域不合法后直接终止POST请求。即使移除自定义请求头，credentials: "include"会让请求携带Cookie，这同样属于需要预检的场景；如果服务器没有配置允许携带凭证的响应头，POST请求依然会失败。

解决思路 #

• 确认调试源地址：查看VS Code调试时的页面URL（如http://localhost:5500），确保服务器端CORS配置允许该源访问
• 完善服务器CORS配置：
  • 允许OPTIONS请求，返回200状态码
  • 设置Access-Control-Allow-Origin为调试服务器的具体域名（若用credentials: "include"，不能设为*）
  • 添加Access-Control-Allow-Credentials: true，支持携带Cookie
  • 若后续需要恢复自定义请求头，需添加Access-Control-Allow-Headers指定允许的头字段
• 统一运行环境：可在VS Code中配置调试目标为你自己的开发服务器，保持和直接在Chrome运行时的环境一致

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