如何正确导入JS模块？解析INI文件遇CORS错误求助

我想解析INI文件，写了以下代码，但运行时出现CORS相关错误，改用require语法后问题依旧，期望得到结果{name: "name", age: "age"}。

我的代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="parseINIFile.js"></script>
</head>
<body>
</body>
</html>

最初的parseINIFile.js代码 #

import {parse} from "ini";
console.log(parse("name=name\nage=age"));

报错信息 #

• Access to script at 'file:///C:/Users/User/Documents/JS/parseINIFile.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.
• Failed to load resource: net::ERR_FAILED

尝试过的修改 #

改用require语法，但问题依旧：

const {parse} = require("ini");
console.log(parse("name=name\nage=age"));

解决办法 #

1. 解决CORS问题：用本地服务器运行代码 #

直接双击打开本地HTML文件会触发CORS限制，因为浏览器把file://协议视为跨域。你需要用本地HTTP服务器来运行代码：

• VSCode插件：安装Live Server插件，右键HTML文件选择"Open with Live Server"
• Python：打开终端，进入代码所在目录，执行python -m http.server（Python3）或python -m SimpleHTTPServer（Python2），然后访问http://localhost:8000
• Node.js：先全局安装http-server：npm install -g http-server，然后进入代码目录执行http-server，访问提示的地址

2. 正确加载ini模块 #

ini是npm包，浏览器环境无法直接通过import或require加载，需要用以下两种方式处理：

方式一：用CDN引入ini库

修改JS代码，直接通过CDN加载ES模块版本的ini：

import {parse} from 'https://cdn.jsdelivr.net/npm/ini@4.1.1/esm/index.js';
console.log(parse("name=name\nage=age"));

这样修改后，用本地服务器运行就能正常输出期望的结果。

方式二：用打包工具打包代码

如果需要使用npm包管理依赖，可以用Vite、Webpack等工具打包：

1. 进入代码目录，初始化npm项目：npm init -y
2. 安装ini和Vite：npm install ini vite --save-dev
3. 修改package.json，添加启动脚本：

   "scripts": {
     "dev": "vite",
     "build": "vite build"
   }
   

4. 运行npm run dev，访问提示的本地地址即可正常运行代码。

内容的提问来源于stack exchange，提问作者Chorli