使用Socket.io与静态index.html时，如何获取远程跳转来源URL？

嘿，我之前也碰到过一模一样的情况，原来的socket.request.headers.referer拿不到远程站点地址是有原因的——Socket.io的连接请求是从你的index.html页面发起的，它的referer头只会是当前页面的URL，而用户跳转过来的真实来源，其实是页面本身加载请求的referer。给你两个靠谱的解决方案：

方案一：前端传递页面来源作为连接参数 #

这是最直接的实现方式，我们在前端先拿到用户跳转至当前页面的来源地址，再通过Socket.io连接参数传给后端：

前端代码（index.html中） #

// 获取页面的跳转来源地址
const pageReferrer = document.referrer;
// 建立Socket.io连接时通过query参数传递该地址
const socket = io({
  query: {
    remoteReferrer: pageReferrer
  }
});

后端代码 #

io.on('connection', function (socket) {
  // 从握手参数中获取前端传递的远程来源
  const remoteReferrer = socket.handshake.query.remoteReferrer;
  console.log('用户从以下地址跳转而来:', remoteReferrer);
});

方案二：通过Express Session存储页面来源 #

如果你的站点用Express托管，也可以在页面加载时把请求的referer存入session，再在Socket.io连接时读取：

Express端配置 #

// 确保你已经配置好Express Session
app.get('/mysockets/index.html', (req, res) => {
  // 将页面加载请求的referer存入session
  req.session.remoteReferrer = req.headers.referer;
  res.sendFile('index.html');
});

Socket.io读取Session #

需要先让Socket.io和Express共享session（可以用express-socket.io-session这类工具包），然后：

io.on('connection', function (socket) {
  const remoteReferrer = socket.request.session.remoteReferrer;
  console.log('用户跳转来源:', remoteReferrer);
});

注意事项 #

• document.referrer可能为空：比如用户直接输入URL访问、浏览器设置不发送referer，或者从HTTPS站点跳转到HTTP站点时，浏览器会隐藏referer，这种情况要做兼容处理。
• 后端要对传递的referrer做合法性校验，避免恶意参数。

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