使用Axios时遇多种导入及CORS错误的技术求助

先理清楚你踩的坑 #

• require is not defined：浏览器不支持Node.js的CommonJS模块语法（require属于该规范），只能使用ES6的import/export语法。
• cannot use import statement outside a module：浏览器默认将脚本视为传统非模块脚本，必须通过type="module"声明为ES模块。
• CORS错误：直接双击打开本地HTML文件使用的是file://协议，浏览器出于安全限制，禁止该协议下加载模块脚本，必须切换到HTTP/HTTPS协议访问。

直接上解决办法 #

1. 搭建本地HTTP服务器（最彻底的解决方式） #

file://协议的限制无法绕过，必须切换到HTTP协议运行项目：

• 使用Node.js的http-server工具：
  1. 全局安装工具：npm install -g http-server
  2. 进入代码所在目录，执行命令：http-server
  3. 打开浏览器访问控制台输出的地址（例如http://localhost:8080），即可正常加载模块脚本，CORS问题也会消失。
• 若已安装Python，可直接用Python启动服务器：
  • Python 3：python -m http.server
  • Python 2：python -m SimpleHTTPServer

2. 规范ES模块配置 #

你已在package.json中设置"type": "module"，还需注意以下细节：

• JS文件后缀使用.js即可（.mjs也支持，但配合package.json的type配置更规范）
• HTML中的script标签必须添加type="module"属性：

  <script type="module" src="./test.js"></script>
  

• 导入本地安装的axios时，需指定完整相对路径：

  import axios from './node_modules/axios/dist/axios.js';
  

  嫌路径麻烦的话，可使用Vite、Webpack等打包工具，将axios打包进你的业务脚本，无需直接引用node_modules目录下的文件。

3. 用CDN快速测试（无需折腾环境） #

如果只是快速验证功能，可直接通过CDN引入axios，无需本地安装：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

引入后可直接在JS中使用全局的axios变量，无需import或require，模块和CORS问题都能规避。

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