显式设置Javascript文件MIME类型解决跨浏览器上传失败问题

结论 #

完全可以修改JS文件的MIME类型，该场景属于前端浏览器兼容性+后端存储规则适配的常见需求，可通过前后端配合快速解决。

现有参考代码问题说明 #

你提供的示例处理逻辑无法生效，因为浏览器原生File对象的type属性为只读属性，直接对其赋值不会修改原有属性值。

实现思路 #

前端（React层）处理 #

上传前手动生成新的File对象，统一JS文件的MIME类型：

const originFile = file.files[0];
let uploadFile = originFile;

// 覆盖所有常见的非标准JS MIME类型
const jsMimeWhiteList = ['text/javascript', 'application/x-javascript', 'text/x-javascript'];

if (originFile.name.endsWith('.js') && jsMimeWhiteList.includes(originFile.type)) {
  // 基于原文件内容创建新File对象，手动指定标准MIME类型
  uploadFile = new File([originFile], originFile.name, {
    type: 'application/javascript',
    lastModified: originFile.lastModified
  });
}

// 后续上传逻辑使用新生成的uploadFile即可

同时可以给文件选择器添加accept属性，缩小可选文件范围：

<input type="file" accept=".js,application/javascript,text/javascript" />

后端（Loopback层）处理 #

前端修改逻辑可被用户绕过，因此后端必须作为最后一道校验防线，在文件上传的预处理逻辑中添加转换规则：

1. 先校验文件后缀是否为.js，避免非JS文件被误转换
2. 匹配到非标准的JS MIME类型时，统一转换为application/javascript后再执行存储逻辑

Loopback示例代码：

// 在文件上传模型的前置远程钩子中添加处理逻辑
FileModel.beforeRemote('upload', async (ctx) => {
  const uploadFiles = ctx.req.files || [];
  const allowedJsMime = 'application/javascript';
  const jsMimeWhiteList = ['text/javascript', 'application/x-javascript', 'text/x-javascript'];

  uploadFiles.forEach(file => {
    if (file.name.endsWith('.js') && jsMimeWhiteList.includes(file.type)) {
      file.type = allowedJsMime;
    }
  });
});

理想解决方案 #

采用前后端双重校验+转换的方案，兼顾用户体验和数据合规性：

• 前端提前转换MIME类型，减少后端无效请求，同时给用户明确的文件选择范围提示
• 后端统一做类型校验和转换，不受前端逻辑影响，确保存入Postgres的数据完全符合现有配置规则
• 额外可增加简单的JS文件内容合法性校验，避免恶意文件伪装成JS格式上传

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