node.js - 生产环境中的 Socket.io 和 nginx CORS

Question

我正在尝试获取一个使用 socket.io v.3.1.1 的应用程序来进行生产。

它在 3000 上的客户端使用 webpack devServer 和 4000 上的服务器使用 nodemon 的开发上运行良好。

但是当我把它放在生产服务器上时，客户提示:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5003/socket.io/?EIO=4&transport=polling&t=NUmy2Us.

服务器

import express from 'express'
import { createServer } from 'http'
import { Server } from 'socket.io'

const app = express()
const prod = process.env.NODE_ENV === 'production'
const port = process.env.PORT || prod ? 5003 : 4000
const httpServer = createServer(app)

const io = new Server(httpServer, {
  cors: {
    origin: '*',
    methods: ['GET', 'POST']
  }
})

const connections = []

io.on('connection', (socket) => {
  connections.push(socket)
  console.log(`Socket id ${socket.id} connected`)

  socket.on('disconnect', () => {
    connections.splice(connections.indexOf(socket), 1)
  })
})

httpServer.listen(port, () => console.log(`App listening on port ${port}.`))
....

客户端

...
import { io } from 'socket.io-client'

const port = process.env.NODE_ENV === 'development' ? '4000' : '5003'
const socket = io(`http://localhost:${port}`)

此设置确实适用于开发，但当我将其用于端口 5003 的生产环境时，它会抛出 CORS。

在我得到的 nginx 服务器 block 上

location /thisapp/ {
  auth_basic $authentication;
  auth_basic_user_file /var/www/.htpasswd;
  try_files $uri $uri/ =404;
}

# And other proxies for express routing
location /api/process {
  proxy_pass http://localhost:5003/api/process;
}

location /api/process/download {
  proxy_pass http://localhost:5003/api/process/download;
}

我知道该应用程序正在监听服务器上的 5003。

pm2日志应用

App listening on port 5003.

当我在网络套接字选项卡上查看网络时

在 Dev 我得到这个:

在生产环境中:

生产服务器使用 let's encrypt 在 https 上运行，但这对于我运行的其他应用程序来说从来都不是问题，我想知道 socket.io 是否需要我对此做些什么。

我尝试了多种不同方法的组合，但我总是这样:

Answer 1

我上周刚遇到这个问题 - 虽然不是使用 Socket.io - 所以希望我能提供帮助。

---

在回答之前，一个链接指向您阅读正在发生的事情:https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#how_to_allow_cross-origin_access

---

如果您的 NGINX 有权使用 more_set_headers，那么请尝试将其添加到您的位置 block 中:

  more_set_headers 'Access-Control-Allow-Origin: *';

如果可行，接下来您可以尝试进一步削减:

  more_set_headers 'Access-Control-Allow-Origin: http://localhost:5003';

如果您无权访问 more_set_headers，您可以使用 add_headers，但它的名称容易混淆。它不仅添加标题；它还将删除层次结构中更上层的 block 应用的任何 header ，例如在您的服务器 block 中。 more_set_headers 不会删除这些 header ，而是真正的附加。

语法有点不同。如果你被迫使用 add_headers 试试:

  add_header Access-Control-Allow-Origin *;

或更严格:

  add_header Access-Control-Allow-Origin http://localhost:5003;

---

最后，如果您需要支持多个来源，您可以这样做，让 NGINX 自动返回与发出请求的来源兼容的 header 。

在您的服务器 block 之外:

  map $http_origin $allow_origin {
      ~^(http://localhost:5003|http://example.com)$ $http_origin;
  }

在您的位置 block 内:

add_header Access-Control-Allow-Origin $allow_origin;

我不是 100% 确定将 map 与 more_set_headers 一起使用的语法，但这应该让你达到 95% 的程度。