XMLHttpRequest upload的progress事件不生效且报CORS跨域错误如何解决？

1. CORS跨域错误修复 #

该错误由服务端未配置跨域访问权限导致，浏览器的同源策略拦截了预检请求，可通过以下方式修复：

• 服务端配置跨域响应头
  如果服务端使用Express框架，配置示例：

const cors = require('cors');
app.use(cors({
  origin: 'http://127.0.0.1:5501',
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: '*'
}))

如果服务端用Nginx部署，在对应location配置块添加：

add_header Access-Control-Allow-Origin http://127.0.0.1:5501;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers '*';
if ($request_method = OPTIONS) {
  return 204;
}

• 开发阶段临时解决可以配置前端代理，将请求转发到服务端，避开跨域限制。

2. net::ERR_FAILED错误修复 #

该错误通常由请求地址配置错误、服务端不可达导致：

• 检查代码中serveraddress变量是否为完整正确的服务端接口地址，你报错信息中请求地址http://serveraddress:/存在明显格式错误，需要替换为实际可用的接口地址，格式为协议://服务端IP或域名:端口/接口路径。
• 确认服务端正常启动，对应端口没有被防火墙拦截，可正常接收请求。

3. 上传进度事件适配优化 #

跨域和请求地址问题修复后如果进度事件仍未触发，可补充以下优化：
progress事件回调中先判断event.lengthComputable属性，避免文件总大小无法获取导致的计算错误：

oReq.upload.addEventListener("progress", function(event) {
  if (event.lengthComputable) {
    let percent = (event.loaded / event.total * 100).toFixed(2);
    document.getElementsByClassName("insider-bar")[0].style.width = percent + '%';
    document.getElementById('progress-percent').innerHTML = percent + '%';
  }
});

不要手动设置Content-Type请求头，FormData会自动携带正确的请求头和boundary参数，手动设置会导致上传异常。

内容的提问来源于stack exchange，提问作者mehdi.rt