Node.js/Express.js中如何获取带查询参数的请求来源域名

当前场景：页面（如https://abc.com?userId=1&campaiginId=2）通过<img src="https://external.com">这类标签请求外部资源，在后端（基于Express框架）处理请求时，需要获取包含查询参数的完整来源地址，但目前使用req.get('origin')只能拿到域名部分（如https://abc.com），无法获取查询参数。现有代码如下：

app.get('/route', function (req, res) { 
  var origin = req.get('origin'); 
  console.log(origin) 
});

需要实现获取带查询参数的完整来源地址，例如https://abc.com?userId=1&campaiginId=2。

核心原因 #

Origin请求头的定义仅包含协议、域名和端口，不会携带查询参数或路径信息，因此无法通过它获取完整带参地址。要获取包含查询参数的来源信息，需使用Referer请求头。

具体实现 #

1. 通过Referer请求头获取 #

当页面发起资源请求时，浏览器会自动在请求头中携带Referer字段，该字段包含完整的来源页面URL（含查询参数）。修改代码如下：

app.get('/route', function (req, res) { 
  var fullReferrer = req.get('referer'); // 注意拼写为referer（少一个r）
  console.log(fullReferrer); // 输出示例：https://abc.com?userId=1&campaiginId=2
});

• 注意：Referer字段的拼写是referer（并非referrer），Express的req.get()方法对大小写不敏感，写Referer或referer均可。
• 兼容性处理：若用户浏览器禁用了Referer，或通过隐私模式、特定工具发起请求，该字段可能不存在，需做兜底处理：

app.get('/route', function (req, res) { 
  var fullReferrer = req.get('referer');
  if (fullReferrer) {
    console.log(fullReferrer);
  } else {
    // 用Origin兜底，仅获取域名部分
    console.log(req.get('origin'));
  }
});

2. 前端主动传递参数（备选方案） #

若担心Referer不可靠，可在前端发起请求时，主动将当前页面的完整URL作为参数传递：

• 前端代码示例：

<script>
  const currentUrl = window.location.href;
  // 以img标签为例，将完整URL编码后作为参数拼入请求地址
  const img = document.createElement('img');
  img.src = `https://external.com/route?source=${encodeURIComponent(currentUrl)}`;
  document.body.appendChild(img);
</script>

• 后端接收代码：

app.get('/route', function (req, res) { 
  const sourceUrl = decodeURIComponent(req.query.source);
  console.log(sourceUrl); // 输出完整带参的来源地址
});

内容的提问来源于stack exchange，提问作者Md Saif Uddin