Express.js设置自定义下载文件名失效，文件以路由名下载如何解决？

问题修复方案 #

1. 修复if-else IP校验不生效问题 #

• 原因：Express默认获取的req.ip在本地开发、存在反向代理的场景下，会返回::1（IPv6格式本地地址）、::ffff:127.0.0.1这类格式，和你预设的ip0/ip1（大概率是IPv4格式如127.0.0.1）格式不匹配，导致判断永远不通过。
• 修复步骤：
  1. 先在接口内打印req.ip确认实际获取到的IP格式：console.log('当前请求IP：', req.ip)
  2. 调整判断条件适配实际IP格式，或者开启Express信任代理配置：

  // 放在路由定义前
  app.set('trust proxy', true)
  

2. 修复自定义下载文件名不生效问题 #

• 原因：你的前端和后端端口不同属于跨域请求，浏览器跨域场景下默认不会读取响应头中的Content-Disposition字段，导致无法识别后端传递的自定义文件名，直接用接口路径download-file作为文件名。
• 修复步骤：

后端配置（先完成）

1. 配置CORS跨域规则，暴露Content-Disposition响应头给前端读取，示例用cors包配置：

const cors = require('cors')
app.use(cors({
  origin: 'http://localhost:3000', // 替换成你React前端的实际访问地址
  exposedHeaders: ['Content-Disposition'] // 必须暴露这个头，前端才能读取
}))

2. 下载接口补充错误捕获，避免未处理的异常：

app.get("/download-file", async (req, res) => {
  if (req.ip === ip0 || req.ip === ip1) {
    res.download(`${__dirname}/progetto.odt`, "Progetto Esame.odt", (err) => {
      if (err) res.status(500).send('文件下载失败')
    });
  } else {
    res.status(403).send("Ip non autorizzato!");
  }
})

前端调整（替换原有href跳转写法）

不要直接用href属性跳转跨域下载，改为通过fetch请求获取文件blob后手动触发下载，同时从响应头读取自定义文件名：

// React按钮组件示例
const downloadFile = async () => {
  try {
    const res = await fetch('http://localhost:3001/download-file')
    if (res.status === 403) {
      alert('IP无权限')
      return
    }
    // 从响应头获取文件名
    const contentDisposition = res.headers.get('Content-Disposition')
    const fileName = contentDisposition.split('filename=')[1].replaceAll('"', '')
    // 转为blob后创建临时下载链接
    const blob = await res.blob()
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = fileName
    a.click()
    window.URL.revokeObjectURL(url)
  } catch (e) {
    console.error('下载失败', e)
  }
}

// 按钮使用onClick触发，不要写href
<button onClick={downloadFile}>下载文件</button>

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