【问题标题】：How do I set a custom origin for socket.io-client connections?如何为 socket.io-client 连接设置自定义来源？
【发布时间】：2019-01-26 00:14:51
【问题描述】：

我想将我的 node.js 客户端 (node-webkit) 连接到我没有可以直接访问的 socket.io 服务器。服务器需要连接以匹配请求标头中的某个来源，但我找不到更改它的方法。

这就是我所拥有的：

var io = require('socket.io-client');

socket = io.connect( url );

要重现，socket.io 包需要使用 npm 安装

它连接到服务器，发送一些“ping”和“pong”，然后服务器终止连接（正如预期的那样，因为来源错误）。

请注意，我无法更改服务器，因此不可能简单地将来源添加到白名单。

到目前为止我尝试过的事情

像这样使用extraHeaders：

socket = io.connect( url, {extraHeaders: {origin: url}} )

..但这不会改变原点。我尝试编辑其他/自定义标题，但 extraHeaders 选项似乎没有做任何事情。

我也查看了节点cors 模块，但documentation 仅提供了有关如何为express 应用程序请求设置来源的示例，而不是socket.io。

最后，我只是尝试将全局 origin 变量设置为正确的 url，但 socket.io 没有接收到。

注意：为了检查这些方法是否有效，我查看了 DevTools 中的“网络”选项卡以查看请求标头。

【问题讨论】：

您找到解决方案了吗？

标签： node.js socket.io cors cross-domain node-webkit

【解决方案1】：

您不需要从客户端更改任何内容，它是服务器端配置。

如果您有权访问那里的服务器，只需将您的源添加到 IO 服务器 源列表或将其设置为 *。

这是来自 socket.io 的how to link docs。

【讨论】：

谢谢，但问题是我无法访问服务器。我想知道如何在客户端编辑源头。
实际上您不能在客户端内更改它，您不能以违反安全规则的方式伪造您的来源，我更喜欢阅读这篇文章，它将对您有很大帮助，请点击此链接。 html5rocks.com/en/tutorials/cors
没错，现代浏览器不允许用户（JS）设置原点，它们会自动设置。但是使用节点是可能的，例如对于使用this guide 的 expressjs/cors 请求。还是谢谢！

【解决方案2】：

为了将来参考，任何使用 socket.io-client 并遇到相同问题的人，您可以通过创建一个小型 Web 扩展来解决此问题，然后将其添加到您的浏览器中。您当然必须将此添加为您的应用的安装条件。

在内容脚本和后台脚本中，添加拦截请求事件处理程序。处理程序可以将源头值更新为当前选项卡源源或其他任何内容。

content-script.js

(async () => {
  await browser.runtime.sendMessage({action: "setActiveTabOrigin"})
})();

background.js

browser.runtime.onMessage.addListener(async (params) => {
  if (params.action == "setActiveTabOrigin") {
    window.origin = await browser.tabs.query({currentWindow: true})
      .then((tabs) => {
        for (var tab of tabs) {
          if (tab.active) {
            const url = new URL(tab.url)
            return url.origin
          }
        }
    })
  }
});

function rewriteWSHeaders(e) {
 for (var header of e.requestHeaders) {
   if (header.name.toLowerCase() == "origin") {
     if (header.value == "null") {
       console.log("!!! Setting request origin to the active tab url origin : ", window.origin)
       header.value = window.origin
     }
   }
 }
 return {requestHeaders: e.requestHeaders};  
}  

// For the API details, refer to [mozilla's docs][1]
browser.webRequest.onBeforeSendHeaders.addListener(
  rewriteWSHeaders,
  {urls:["ws://<socket.io-server.host>/*"], types:["websocket"]},
  ["blocking", "requestHeaders"]
);

部分网络扩展 manifest.json ：

  "background": {
    "scripts": ["background.js"]
  }

  "content_scripts": [
    {
      "matches": ["<remoteHost>/*"],
      "js": ["content-script.js"],
      "runAt": "document_start"
    }
  ]

  "permissions": [
    "<all_urls>",
    "webRequest",
    "webRequestBlocking",
    "tabs"
  ],

其他未解释但很容易查找的先决条件

此选项仅在以已知远程主机为目标时有用，因为必须将远程主机添加到“cors allowed origins”列表中，作为 python-socket.io 构造参数传入。
网络扩展源也必须传递给这个列表

websock = socketio.AsyncServer(
      async_mode='asgi',
      logger=logger,
      cors_allowed_origins=[extOrigin, <remoteHost>])

【讨论】：