我不确定这是否真的是VS代码的问题。我在JavaScript中使用Fetch API。当我在Chrome浏览器(而不是Node.JS)中直接在JavaScript中运行Fetch时,我没有任何问题。Fetch API执行正常。非常重要的一点是,我没有看到OPTIONS请求被发送。然而,当我使用完全相同的JavaScript(使用VS代码)运行相同的Fetch时,我确实看到一个OPTIONS被发送。更糟糕的是,Fetch(在JavaScript下,在Chrome下,在VS Code下)不会等待OPTIONS完成。Fetch失败,并显示“Failed to fetch”错误。我不明白为什么VS Code会有什么不同?我做错了什么?我应该提供哪些附加信息?这个问题应该如何调试?
在VSC环境中,我使用F5运行代码(在Run菜单下,它的意思是“开始调试”)。当我在VSC之外运行代码时,我在Network下看不到任何内容(没有OPTIONS请求)。当我在VSC下运行代码时,我在控制台中看到CORS失败。为什么我在VSC下收到OPTIONS请求,但在VSC之外没有OPTIONS?
我对这方面有了更多的了解。OPTIONS HTTP请求似乎与使用HTTP标头有关。如果我去掉HTTP头,OPTIONS HTTP请求就会消失。但是,POST HTTP请求仍然失败,并显示“Failed to fetch”。请参阅下面的代码。
/* 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;
3条答案
按热度按时间lsmd5eda1#
我将下面的内容添加到我的launch.json文件中,问题就解决了。
“runtimeArgs”:["--disable-web-security”,"--user-date-dir=c:\chrome-browser”]
把所有这些东西放在一起,看起来当我在没有VSC的情况下运行时,CORS是/曾经是以某种方式(自动?部分残疾。当我在VSC内部运行时,CORS没有被禁用。因此,必须手动禁用CORS。至少这种解释符合事实。到底发生了什么,我不知道。
pexxcrt22#
检查任何其他代码差异:确保在VS Code中运行的JavaScript代码版本与直接在浏览器中测试的JavaScript代码版本之间没有代码差异。代码中的任何不一致都可能导致问题。
您在VS Code中使用Fetch API时遇到的行为可能与跨域资源共享(CORS)问题有关。CORS是由Web浏览器实现的安全功能,用于防止网页向与服务该网页的域不同的域发出请求。
在浏览器中调试:如果您想在从VS Code运行代码时在浏览器中调试问题,可以打开Chrome开发人员工具(F12或Ctrl+Shift+I)并转到“网络”选项卡。在那里,您可以看到请求和响应头,包括任何与CORS相关的问题。
yhuiod9q3#
VS Code中是否有任何可能影响网络请求或执行环境的扩展?尝试禁用它们。听起来不同的环境或运行时可能是问题所在。检查差异?希望能帮上忙!