尝试通过 socket.io 连接到服务器时出现 CORS 错误

Question

我来了

Access to XMLHttpRequest at 'http://localhost:4000/socket.io/?EIO=3&transport=polling&t=Moz5j40' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000/' that is not equal to the supplied origin.

尝试访问 websocket 时出错。

我试过设置 cors 包并设置

io.origins("*:*");

后端：

import express from "express";
import cors from "cors";
import _http from "http";
import _io from "socket.io";

const app = express();
const http = _http.createServer(app);
const io = _io(http);
io.origins("*:*");

app.use(
  cors({
    credentials: true,
    origin: "http://localhost:3000/"
  })
);

io.on("connection", socket => {
  console.log("a user connected");
});

app.listen(4000, () => {
  console.log("Listening on port 4000!");
});

前端：

import React, { useState } from "react";
import openSocket from "socket.io-client";

const socket = openSocket(process.env.REACT_APP_API_URL as string);
function subscribeToTimer(
  cb: (err: Error | null, timestamp: number) => void
): void {
  socket.on("timer", (timestamp: number) => cb(null, timestamp));
  socket.emit("subscribeToTimer", 1000);
}
export { subscribeToTimer };

const App: React.FC = () => {
  const [timestamp, setTimestamp] = useState(-1);

  subscribeToTimer((_err, tp) => setTimestamp(tp));

  return <div className="App">Current timestamp {timestamp}</div>;
};

export default App;

我希望在终端中看到“用户已连接”消息。

Answer 1

添加一个中间件，将 CORS 标头添加到 *... 不仅是起源，还有方法