JavaScript导入模块中的跨源

编程问答 2023-10-11

问题描述

我有一个 index.html 文件，该文件连接到名为 main.js 的文件。 我尝试使用import将另一个 js 文件导入到 main.js 中，但始终会出现以下错误：

CORS策略已阻止从源'null'访问'file：/// C：/...js/main.js'上的脚本：仅协议方案支持跨源请求：http，数据，chrome，chrome扩展名，https。

我试图打开服务器，但没有解决问题。我不知道问题出在我的html文件还是js文件中，我真的需要您的帮助。

我的代码如下：

index.html 

<body>
    <script type="module" src='./js/main.js'></script>
</body>

main.js 

import {
    double
} from './utils.js';

utils.js 

export function double(n) {
    return n * 2;
}

解决方法

您现在可能已经解决了这个问题，但对于将来使用谷歌搜索的任何人来说，这是解决方案。

错误消息说您无法从源“null”访问文件，并指出您只能使用某些协议方案执行这些请求。您计算机上的本地文件具有的协议方案是“file://”，我认为起源：“null”是关于它不在网站上（例如 http://a.com vs file://a/ b/c).

您需要做的是启动一个本地服务器来解决这个问题。最简单的方法是使用 this python one-liner。如果您使用的是 MacOSX 或 Linux，请继续使用以下命令：

$ cd path/to/website
$ python -m SimpleHTTPServer 8080
Serving HTTP on 0.0.0.0 port 8000 ...

如果你在Windows上，你需要在制作服务器之前安装Python。为此，请转至 the downloads page on their website 并下载最新版本。要检查它是否已安装，请在命令提示符下运行：

python -V

如果您得到类似 Python 3.9.5 的信息，您可以继续运行前面提到的命令。

启动服务器后，只需在浏览器中导航到 http://localhost:8080/。

es6-modulesjavascript