-1

I want to debug my client-side JavaScript code in Visual Studio Code (VSC). However, I want to avoid setting up an external live server and want to just load the files from my local drive. Because of this I created the following launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome from the file system",
            "file": "${workspaceFolder}/src/index.html"
        }
    ]
}

This executes well, when starting the debugger with F5 in VSC, Chrome opens and loads my index.html from the src folder.

However, I get the following error message when trying to import my index.js file like this <script src="./index.js" type="module" defer></script>:

Access to script at 'file:///home/matrix/odin-battleship/src/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

I know that this is a safety measure, which prevents websites from accessing my files. I've read about it here. However, I just want to debug my code without creating a live-server. I came across starting Chrome with the flag --allow-file-access-from-files. This question explains how to launch Chrome from launch.json with flags.

Is this the right attempt, or are there better solutions to debug your files from your local storage in VSC?

Marten
  • 645
  • 7
  • 21

1 Answers1

-1

As you have mentioned, it is a security policy enforced by the browser to prevent the website owners from accessing the files on your computer.

You should start distributing this js file from any servers. That way your scheme will be http or https and the file can be served safely over to the browser.

Hanly Nadackal
  • 124
  • 4