我要
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.
尝试访问网络套接字时出错。
我尝试设置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;
我希望在终端中看到“用户已连接”消息。
答案 0 :(得分:0)
添加将CORS标头添加到* ...的中间件 它不仅是起源,而且是方法