尝试使用导入的 js 函数启动 html 页面时，“CORS 策略已阻止从源‘null’访问脚本”错误

Question

我在尝试使用从另一个文件导入函数的 javascript 文件启动 html 页面时遇到此错误：

Access to script at 'file:///C:/Users/bla/Desktop/stuff/practice/jsPractice/funcexecute.js' 
from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Failed to load resource: net::ERR_FAILED

这是html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

</head>
<body>
    <script type = 'module' src='funcexecute.js'></script>

</body>
</html>

从 html 调用的 js 文件：(funcexecute.js)

import sumup from '/funcfile.js';
console.log(sumup(1,2));

导入的模块：（funcfile.js）

function sumup(num1, num2){
    return num1+num2;
}
export default sumup;

我怎样才能解决这个问题？ （我正在使用 vscode）

Answer 1

如果不使用服务器，就不能将脚本文件用作模块。 看看这里

以下是一些选项

• 使用 Live Server（VS Code 的扩展）
• 使用 node 中的http-server模块（通过 npm 安装，然后从项目目录运行http-server . ）
• 使用 python 中的http.server包
• 使用 wamp（或灯）服务器

总之不能使用type="module"与文件协议

Answer 2

右键单击 Visual Studio Code 中的index.html文件，选择Open with Live Server 。
这将解决您的问题。

JS 中的导出/导入仅适用于服务器，它们不适用于本地机器（有不同的代码）。
这是如何做到这一点，分步说明。

Answer 3

1. type = "module"通常与 webpack 一起使用。

2. 如果不使用webpack，则需要启动一个静态服务

3. 你可以使用http-server -p 8003启动服务

Answer 4

问题是因为文件是直接打开的； 所以似乎有几种方法可以解决这个问题：一种是禁用 Chrome 中的安全性，尽管尽我所能，但我无法让它放弃幽灵：我尝试了围绕 –disable- 的各种组合Chrome 的网络安全标志。

第二种选择是在本地托管站点。 有那么一瞬间，我考虑使用 IIS Express 之类的东西； 但幸运的是，我遇到了这个工具，它可以为您在本地托管一个站点。

它可以作为 npm 包安装： npm install --global http-server 安装后，您只需导航到相关目录，然后键入 http-server：

 C:\\repos\\webanimations\\animated-columns-optimised>http-server Starting up http-server, serving ./ Available on: http://192.168.1.79:8080 http://127.0.0.1:8080 http://172.17.230.225:8080 Hit CTRL-C to stop the server

然后您可以导航到您的特定页面； 例如：

 http://127.0.0.1:8080/columns

并且没有更多的 CORS 错误（还不太有效，但那是一个完全不同的故事）。

Answer 5

将脚本链接中的type="module"替换为type="JavaScript" 。