Access-Control-Allow-Origin is not shown even I added in server - node.js

Question

server side
const express = require("express");
const socket = require("socket.io");
const http = require("http");
const { addUser, removeUser, getUser, getUsersInRoom } = require("./user");
const PORT = process.env.PORT || 8000;
// 2. 라우터 설정
const router = require("./router");
const app = express();
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader("Access-Control-Allow-Origin", "http://localhost:3001");
res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type");
res.setHeader("Access-Control-Allow-Credentials", true);
next();
});
const server = http.createServer(app);
const io = socket(PORT);
io.on("connection", (socket) => {
console.log("소켓 연결 완료");
socket.on("join", ({ name, room }, callback) => {
const { error, user } = addUser({ id: socket.id, name, room });
if (error) return callback(error); // username taken
socket.join(user.room);
socket.emit("message", {
user: "admin",
text: `${user.name}, welcome to the room ${user.room}`,
});
socket.broadcast
.to(user.room)
.emit("message", { user: "admin", text: `${user.name}, has joined!` });
io.to(user.room).emit("roomData", {
room: user.room,
users: getUsersInRoom(user.room),
});
callback();
});
socket.on("sendMessage", (message, callback) => {
const user = getUser(socket.id);
io.to(user.room).emit("message", { user: user.name, text: message });
// callback();
});
socket.on("disconnect", () => {
const user = removeUser(socket.id);
console.log("유저가 떠났습니다..");
if (user) {
io.to(user.room).emit("message", {
user: "Admin",
text: `${user.name} has left.`,
});
io.to(user.room).emit("roomData", {
room: user.room,
users: getUsersInRoom(user.room),
});
}
});
});
app.use(router);
server.listen(PORT, () => console.log(`server has started on port ${PORT}`));
and this is client side
import React, { useEffect, useState } from "react";
import queryString from "query-string";
import io from "socket.io-client";
import "./Chat.css";
// 하위 컴포넌트
import Messages from "../Messages/Messages";
import RoomInfo from "../RoomInfo/RoomInfo";
import Input from "../Input/Input";
let socket;
const Chat = ({ location }) => {
const [name, setName] = useState("");
const [room, setRoom] = useState("");
const [message, setMessage] = useState("");
const [messages, setMessages] = useState([]);
const [users, setUsers] = useState("");
const ENDPOINT = "http://localhost:8000/";
useEffect(() => {
const { name, room } = queryString.parse(location.search);
socket = io.connect(ENDPOINT); // 소켓 연결
setName(name);
setRoom(room);
console.log(name, room); // lama peru
// console.log(socket);
socket.emit("join", { name, room }, (error) => {
// console.log("error");
// 에러 처리
if (error) {
alert(error);
}
});
}, [ENDPOINT, location.search]);
useEffect(() => {
// 서버에서 message 이벤트가 올 경우에 대해서 `on`
socket.on("message", (message) => {
setMessages([...messages, message]);
});
socket.on("roomData", ({ users }) => {
setUsers(users);
});
}, [messages]);
// 메세지 보내기 함수
const sendMessage = (e) => {
e.preventDefault();
if (message) {
socket.emit("sendMessage", message, setMessage(""));
}
};
console.log(message, messages);
console.log(users, "users");
return (
<div className="chatOuterContainer">
<div className="chatInnerContainer">
<div className="appbar"></div>
<div className="chatScreen">
<div className="chatScreen">
<RoomInfo room={room} />
<div className="messageContainer">
<Messages messages={messages} name={name} />
</div>
<Input message={message} setMessage={setMessage} sendMessage={sendMessage} />
</div>
</div>
</div>
</div>
);
};
export default Chat;
and when I try the website I get this
[enter image description here][1]
as you can see there's no Access-Control-Allow-Origin in response header..
I start my project by following.
first start server by 'node server.js'
start client by command 'yarn start'
the cors options don't seem to apply.
[1]: https://i.stack.imgur.com/QpQ7o.png
would be very thankful if you help me!

Answer 1

try this:
app.all('/*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*")
res.header("Access-Control-Allow-Credentials", "true")
res.header("Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization")
res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS")
next()
})