如何在Express中获取请求来源的完整页面路径

你当前拿不到完整来源页路径的核心原因是：

• req.headers.origin 是HTTP协议规定的跨域请求标识头，本身设计就只包含协议+域名+端口，不会携带任何路径信息
• req.path/req.originalUrl/req.host 等属性，都是当前Node服务接收到的API请求本身的属性，自然只会返回你接口的路径和域名，和来源页面无关

方案1：使用Referer请求头（无需前端改代码） #

浏览器发起请求时默认会携带Referer请求头，值就是发起请求的页面完整路径，你可以直接在Node服务中通过req.headers.referer获取。

注意事项：

• 注意拼写是referer（HTTP标准拼写少了一个r，不要写成referrer）
• 如果你的网站配置了Referrer-Policy为no-referrer/origin这类截断规则，就会拿不到完整路径，需要把规则调整为strict-origin-when-cross-origin（同域下会返回完整路径）或更宽松的规则

方案2：前端手动传递来源路径（兼容性最高，完全可控） #

如果担心Referer被浏览器策略限制，可以在前端发起请求时，主动把当前页面地址作为参数传递给后端，有两种常用方式：

• 放在URL查询参数中：
  前端请求示例：fetch(/api/xxx?sourceUrl=${encodeURIComponent(window.location.href)})
  后端取值：const sourceUrl = decodeURIComponent(req.query.sourceUrl)
• 放在自定义请求头中：
  前端请求示例：

  fetch('/api/xxx', {
    headers: {
      'X-Source-Url': encodeURIComponent(window.location.href)
    }
  })
  

  后端取值：const sourceUrl = decodeURIComponent(req.headers['x-source-url'])

注意：如果是跨域请求，需要在Node服务的CORS配置中把X-Source-Url加到允许的请求头列表中，否则会触发跨域拦截。

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