CORS Policy Error When Loading Local JS File in HTML

[ZacharyZcR]

Description

During local development, when trying to load a JavaScript file from an HTML file, I encountered a CORS policy error. The error message is as follows:

Access to script at 'file:///C:/Users/Administrator/Desktop/zodiac-dev/zodiac-dev/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

This issue prevents the JavaScript file from loading properly, which affects the functionality of the page.

Steps to Reproduce

Place the HTML file and JavaScript file in a local folder.
Open the HTML file by double-clicking it or directly opening the file path file:///C:/Users/Administrator/Desktop/zodiac-dev/zodiac-dev/zodiac.html in the browser.
Observe the browser console to find the aforementioned CORS error.

Expected Behavior

The HTML file should be able to load and execute the local JavaScript file without interference from CORS policies.

Actual Behavior

The browser blocks the loading of the JavaScript file, throwing a CORS policy error.

Possible Solutions

It is recommended to set up a local development server, such as using Python's HTTP server module, or host the files through a web server software like Apache or Nginx. This can prevent CORS issues associated with opening files directly from the file system.

Environment Information

Operating System: Windows 10
Browser: Google Chrome Version 125.0.6422.142
File Path: C:/Users/Administrator/Desktop/zodiac-dev/zodiac-dev