Socket.io与Firebase主机上的客户端和Heroku上的服务器

Question

我创建了一个应用程序，它使用Angular作为前端，使用node.js作为后端。我在Firebase主机上托管前端，在Heroku上托管服务器(因为我读到Firebase函数不支持socket.io(。

在我的socket.service.ts文件中，我使用this.socket = io(environment.socket_url);连接到套接字(对于开发环境，socket_url是http://localhost:3000/，对于生产环境是https://PROJECT_NAME_HERE.herokuapp.com:3000(。

我的server.ts文件中的套接字连接是：

const port = process.env.PORT || 3000;
const server = new http.Server(app);
const io = new Server(server, {
cors: {
origin: socketUrl,
methods: ["GET", "POST"]
}
});

其中socketUrl在开发时是http://localhost:4200，在生产中是https://PROJECT_NAME_HERE.web.app/。

这种设置在开发中有效，但在生产中无效。我该如何让它发挥作用？

编辑：这是我得到的错误：Access to XMLHttpRequest at 'https://PROJECT_NAME_HERE.herokuapp.com/socket.io/?EIO=4&transport=polling&t=NPu1t39' from origin 'https://PROJECT_NAME_HERE.web.app' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://PROJECT_NAME_HERE.web.app/' that is not equal to the supplied origin.

我也在使用app.use(cors({origin: true}));

Answer 1

故障隔离步骤：

1. 将CORS配置中的origin替换为*，并查看是否收到完全相同的错误

cors: {
origin: "*",
methods: ["GET", "POST"]
}

2. 将CORS配置的原点明确设置为Angular应用程序URL，并查看是否出现相同错误：

cors: {
origin: "https://PROJECT_NAME_HERE.web.app",
methods: ["GET", "POST"]
}

如果其中任何一个产生完全相同的错误，则表示您错过了一个配置参数(可能是credentials(。您需要从这里确定需要添加的参数。

否则，您没有包含足够的关于附加或自定义标题、飞行前要求、身份验证(凭据/cookie(等的详细信息。