解决Web应用导入跨域JavaScript模块时的CORS问题

针对你在http://localhost:5000/myApp环境下遇到的问题，以下是几种可行的解决方案：

方案一：替换为interactjs官方ES模块CDN链接 #

你当前用的CDN路径并非标准ES模块入口，导致服务器返回text/plain类型的响应，触发浏览器拦截。直接替换为interactjs官方编译好的ES模块分发链接即可：

import interact from 'https://cdn.jsdelivr.net/npm/@interactjs/interactjs/dist/interact.esm.js'

这个链接返回的是application/javascript正确MIME类型，且jsdelivr默认支持跨域请求，能同时解决CORS和MIME类型错误。

方案二：本地安装interactjs（推荐） #

在Node环境下，本地依赖管理是最稳定的方式，彻底规避跨域问题：

1. 项目根目录执行安装命令：

npm install @interactjs/interactjs

2. 在TypeScript/JavaScript文件中直接导入本地模块：

import interact from '@interactjs/interactjs'

正常编译TypeScript后，前端加载的是本地打包资源，完全不存在跨域和MIME类型问题。

方案三：通过Node后端代理CDN请求 #

如果必须使用CDN资源，可在Node后端配置代理，将前端请求转为同源地址：

1. 安装代理中间件（以Express为例）：

npm install http-proxy-middleware

2. 在Node服务器代码中添加代理配置：

const { createProxyMiddleware } = require('http-proxy-middleware');
const express = require('express');
const app = express();

// 代理interactjs的CDN请求
app.use('/interactjs-proxy', createProxyMiddleware({
  target: 'https://cdn.jsdelivr.net/npm/@interactjs',
  changeOrigin: true,
  pathRewrite: { '^/interactjs-proxy': '' }, // 去掉代理前缀
  headers: { 'Accept': 'application/javascript' } // 指定请求MIME类型
}));

// 其他服务器配置...
app.listen(5000);

3. 前端代码改为请求代理后的同源地址：

import interact from '/interactjs-proxy/interactjs/dist/interact.esm.js'

前端请求的是localhost:5000的同源地址，由Node服务器转发请求到CDN并返回结果，避开跨域限制。

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