个人中心
gpt4 book ai didi

由于错误，Javascript 导入模块到 index.html 未运行

转载 作者：行者123 更新时间：2023-12-03 01:07:08 25 4
gpt4 key购买 nike

我正在尝试将模块导入到我的index.html 文件中。

这是代码:

// Index.html:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>

</head>

<body>

<div></div>

  <script type="module" src="module.js"></script>
  <script type="text/javascript">

    import { addTextToBody } from 'module.js';

    addTextToBody('some text here');

  </script>
</body>
</html>

还有 js:

export function addTextToBody(text) {

  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);

}

我收到这些错误:

未捕获的语法错误:意外的标记 { - 第 18 行

从源“null”访问“module.js”中的脚本已被 CORS 策略阻止:响应无效。因此不允许访问源“null”。

我该如何解决这个问题？

最佳答案

  1. module.js应该是./module.js
  2. 您不需要在页面开头导入模块(但您可以)。
  3. 使用import要求脚本的类型为 module不仅仅是导入的脚本。
  4. 您应该将模块导入放置在 <head> 中(一开始)。

以下示例有效(我删除了不必要的部分):

<!-- index.html -->
<meta charset="utf-8">

<script type="module">
  import { addTextToBody } from './module.js';

  addTextToBody('some text here');
</script>
// module.js
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

上面提供的代码适用于 Firefox，但不适用于 Chrome。看来您正在使用 Chrome(我认为从您的错误消息来看)。 Chrome 严格禁止访问 file:// 的资源协议(protocol)。有一些解决方案:

  1. 使用网络服务器托管您的代码(例如 nginx )。
  2. 使用不同的网络浏览器(例如 Firefox )。
  3. 完全禁用网络安全，请参阅this answer .

关于由于错误，Javascript 导入模块到 index.html 未运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52343339/

25 4 0
文章推荐： javascript - 每次按键时数组都会重置
文章推荐： php - 如何翻译WordPress模板名称？
文章推荐： php - 使用 php (jpeg) 优化上传的图像
文章推荐： javascript - OpenWeather API 错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com