I am not sure if this is really a problem with VS Code or not. I use the Fetch API in JavaScript. When I run the Fetch directly in JavaScript with a Chrome browser, I have no problems. The Fetch API executes fine. A very important point is that I don’t see an OPTIONS request being sent. However, when I run the same Fetch using exactly the same JavaScript (using VS Code) I do see an OPTIONS being sent. Even worse, the Fetch (under JavaScript, under Chrome, under VS Code) does not wait for the OPTIONS to complete. The Fetch just fails with a ‘failed to fetch’ error. I don’t understand this. Why should VS Code make any difference? What am I doing wrong? What additional information should I provide? How should this problem be debugged?
2
Answers
Check for any additional code differences: Ensure that there are no code differences between the version of your JavaScript code running in VS Code and the one you tested directly in the browser. Any inconsistencies in the code could potentially cause issues.
The behavior you are experiencing with the Fetch API in VS Code might be related to a Cross-Origin Resource Sharing (CORS) issue. CORS is a security feature implemented by web browsers to prevent web pages from making requests to a different domain than the one serving the web page.
Debugging in the browser: If you want to debug the issue within the browser while running your code from VS Code, you can open the Chrome Developer Tools (F12 or Ctrl+Shift+I) and go to the "Network" tab. There, you can see the request and response headers, including any CORS-related issues.
Any extensions in VS Code that could be affecting network requests or execution environments? Try disabling them. Sounds like different environments or runtimes could be the problem. Check for differences? Hope that helps!