๊ด€๋ฆฌ ๋ฉ”๋‰ด

JiYoung Dev ๐Ÿ–ฅ

[Node.js] Express์˜ listen ๋ฐ Cors ์„ค์ • ๋ณธ๋ฌธ

full stack/Back-End

[Node.js] Express์˜ listen ๋ฐ Cors ์„ค์ •

Shinjio 2024. 11. 7. 22:10

์–ด์ œ ์ž‘์„ฑํ–ˆ๋˜ Nginx์—์„œ Reverse Proxy ์„ค์ • ํ›„ Spring Server์—์„œ Cors ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ Spring Security Cors ์„ค์ •์— ์™ธ๋ถ€๋ง ์ฃผ์†Œ๋ฅผ ์ถ”๊ฐ€ํ•ด ํ•ด๊ฒฐํ•˜์˜€๋‹ค๊ณ  ํ•˜์˜€๋‹ค. ํ•ด๋‹น ๊ธ€์—์„œ๋Š” ์ž‘์„ฑํ•˜์ง€ ์•Š์•˜์ง€๋งŒ Node.js Express ์„œ๋ฒ„์—์„œ๋„ Cors ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์˜€๋Š”๋ฐ Cors ์„ค์ •๊ณผ ํ•จ๊ป˜ app.listen("0.0.0.0")์„ ์ถ”๊ฐ€ํ•จ์œผ๋กœ์จ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. 

 

์œ„์˜ ๊ณผ์ •์„ ์ง„ํ–‰ํ•˜๋ฉด์„œ Cors๋ฅผ ์„ค์ •ํ•˜๋Š” ๊ฒƒ๊ณผ app.listen("0.0.0.0")์„ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด ์–ด๋–ค ์ฐจ์ด๊ฐ€ ์žˆ๋Š”์ง€ ์•Œ์•„๋ณด์•˜๋‹ค. 


๐Ÿ”Ž Cors ์„ค์ •์˜ ์—ญํ• 

Cors(Cross-Origin Resource Sharing)๋Š” ์›น ๋ธŒ๋ผ์šฐ์ € ๋ฐœ์ƒํ•˜๋Š” ๋ณด์•ˆ ์ •์ฑ…์œผ๋กœ ํด๋ผ์ด์–ธํŠธ์˜ ์ถœ์ฒ˜(Origin)์— ๋”ฐ๋ผ ์„œ๋ฒ„๊ฐ€ ์š”์ฒญ์„ ํ—ˆ์šฉํ• ์ง€ ๋ง์ง€๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค. 

 

์—ฌ๊ธฐ์„œ ์ถœ์ฒ˜(Origin)์ด๋ž€ ํ”„๋กœํ† ์ฝœ(http, https), ๋„๋ฉ”์ธ(์„œ๋ฒ„ IP ๋˜๋Š” ๋„๋ฉ”์ธ), ํฌํŠธ๋ฒˆํ˜ธ์˜ ์กฐํ•ฉ์ด๋‹ค. 

์˜ˆ๋ฅผ ๋“ค์–ด, http://localhost:3000์€ ํ•˜๋‚˜์˜ ์ถœ์ฒ˜์ด๊ณ , http://localhost:5000์€ ํฌํŠธ๊ฐ€ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ๋˜ ๋‹ค๋ฅธ ์ถœ์ฒ˜์ด๋‹ค. 

 

Cors๋Š” ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋‹ค๋ฅธ ์ถœ์ฒ˜์—์„œ ์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ์„œ๋ฒ„๊ฐ€ ์ด ์š”์ฒญ์„ ํ—ˆ์šฉํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ์„ค์ •์ด๋‹ค.

 

โœ” ์˜ˆ์‹œ

๋ฆฌ์•กํŠธ ์•ฑ์ด http://192.168.1.1:3000์—์„œ ์‹คํ–‰๋˜๊ณ  ์žˆ๊ณ , Node.js ์„œ๋ฒ„๊ฐ€ http://192.168.1.1:5000์—์„œ ์‹คํ–‰๋˜๊ณ  ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž. ๋ฆฌ์•กํŠธ ์•ฑ์—์„œ Node.js ์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด, ๋ธŒ๋ผ์šฐ์ €๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‹ค๋ฅธ ํฌํŠธ์—์„œ์˜ ์š”์ฒญ์€ ๋‹ค๋ฅธ ์ถœ์ฒ˜๋กœ ๊ฐ„์ฃผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฅผ CORS ์ •์ฑ…์— ์˜ํ•ด ์ฐจ๋‹จํ•˜๊ฒŒ ๋œ๋‹ค. 

 

์ด๋Ÿฌํ•œ ๊ฒฝ์šฐ Node.js ์„œ๋ฒ„์—์„œ Cors ์„ค์ •์„ ํ†ตํ•ด ๋ฆฌ์•กํŠธ ์•ฑ์˜ ์š”์ฒญ์„ ํ—ˆ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์•ผ ํ•œ๋‹ค. 

app.use(cors({
  origin: "*",   // ๋ชจ๋“  ์ถœ์ฒ˜์—์„œ ์˜ค๋Š” ์š”์ฒญ์„ ํ—ˆ์šฉ
  methods: ["GET", "POST", "PUT", "DELETE"], // ํ—ˆ์šฉํ•  HTTP ๋ฉ”์„œ๋“œ ์„ค์ •
}));

 

์œ„์™€ ๊ฐ™์ด ์„ค์ •์„ ํ•˜๋ฉด ๋ฆฌ์•กํŠธ ์•ฑ(์–ด๋–ค ์ถœ์ฒ˜์—์„œ๋“ )์—์„œ ์˜ค๋Š” ์š”์ฒญ์„ Node.js๊ฐ€ ํ—ˆ์šฉํ•œ๋‹ค. 


๐Ÿ”Ž app.listen("0.0.0.0") ์„ค์ •

app.listen("0.0.0.0") ์„ค์ •์€ ์„œ๋ฒ„๊ฐ€ ์š”์ฒญ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ๋„คํŠธ์›Œํฌ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์ด ์„ค์ •์€ ์„œ๋ฒ„์˜ ์ ‘๊ทผ ๊ฐ€๋Šฅ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค. 

 

0.0.0.0์€ ๋ชจ๋“  ๋„คํŠธ์›Œํฌ ์ธํ„ฐํŽ˜์ด์Šค์—์„œ ์˜ค๋Š” ์š”์ฒญ์„ ์ˆ˜์‹ ํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ด๊ณ , ๋งŒ์•ฝ app.listen("localhost") ํ˜น์€ app.listen("127.0.0.1")๋กœ ์„ค์ •ํ•˜๋ฉด, ์„œ๋ฒ„๋Š” ๋กœ์ปฌ ๋จธ์‹ ์—์„œ๋งŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค. 

 

๋”ฐ๋ผ์„œ ๋กœ์ปฌ์ด ์•„๋‹Œ ์™ธ๋ถ€์—์„œ ์„œ๋ฒ„์— ์ ‘๊ทผํ•˜๋ ค๋ฉด ์„œ๋ฒ„๊ฐ€ 0.0.0.0์œผ๋กœ ์„ค์ •๋˜์–ด ์žˆ์–ด์•ผ ํ•˜๊ณ , ๋™์‹œ์— ์„œ๋ฒ„์˜ ๋ฐฉํ™”๋ฒฝ์ด๋‚˜ ๋„คํŠธ์›Œํฌ ์„ค์ •์—์„œ ํ•ด๋‹น ํฌํŠธ๊ฐ€ ์—ด๋ ค ์žˆ์–ด์•ผ ํ•œ๋‹ค. 


๐Ÿ”Ž  Cors vs app.listen("0.0.0.0")

Cors ์„ค์ •์€ ์„œ๋ฒ„๊ฐ€ ๋‹ค๋ฅธ ์ถœ์ฒ˜์—์„œ์˜ ์š”์ฒญ์„ ํ—ˆ์šฉํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ์—ญํ• ์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ํด๋ผ์ด์–ธํŠธ(๋ฆฌ์•กํŠธ ์•ฑ)์—์„œ ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์ด๋‚˜ ํฌํŠธ๋กœ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ์ด๋ฅผ ํ—ˆ์šฉํ• ์ง€ ๋ง์ง€๋ฅผ ์„ค์ •ํ•œ๋‹ค.

์ฆ‰, Cors๋Š” ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์„ค์ •์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. (๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ฃผ์ฒด)

 

app.listen("0.0.0.0") ์„ค์ •์€ ์„œ๋ฒ„๊ฐ€ ์š”์ฒญ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ๋„คํŠธ์›Œํฌ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์„œ๋ฒ„๊ฐ€ ์‹ค์ œ๋กœ ๋„คํŠธ์›Œํฌ์—์„œ ์š”์ฒญ์„ ์ˆ˜์‹ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํฌํŠธ์™€ ๋„คํŠธ์›Œํฌ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ์ด ์„ค์ •์„ ํ†ตํ•ด ์„œ๋ฒ„๊ฐ€ ์™ธ๋ถ€ IP์—์„œ ์˜ค๋Š” ์š”์ฒญ์„ ์ˆ˜๋ฝํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. 

์ฆ‰, ์„œ๋ฒ„๊ฐ€ ์–ด๋””์„œ๋“  ์š”์ฒญ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ์„ค์ •ํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค. (์„œ๋ฒ„๊ฐ€ ์ฃผ์ฒด)

 

โ‰ ๋งŒ์•ฝ Cors๋งŒ ์„ค์ •ํ•ด ๋‘๊ณ , listen("0.0.0.0") ์„ค์ •์„ ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด?

๋งŒ์•ฝ ์™ธ๋ถ€๋ง์—์„œ ๋‚ด๋ถ€๋ง์œผ๋กœ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ Cors๋งŒ ์„ค์ •ํ•˜๊ณ   app.listen("0.0.0.0")์„ ์„ค์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ์„œ๋ฒ„๋Š” Cors ์ •์ฑ…์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์—ฌ์ „ํžˆ ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ์„ ๋ฐ›์ง€ ๋ชปํ•˜๊ฒŒ ๋œ๋‹ค.

์š”์ฒญ์„ ๋ณด๋‚ธ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„์™€ ์—ฐ๊ฒฐ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, Cors ์„ค์ •์ด ์ž˜ ๋˜์–ด ์žˆ๋‹ค๊ณ  ํ•˜๋”๋ผ๋„ ์š”์ฒญ์„ ์„ฑ๊ณตํ•˜์ง€ ์•Š๊ฒŒ ๋œ๋‹ค.  

 

โ‰ ๊ทธ๋Ÿผ Port๋งŒ ๋‹ค๋ฅผ ๋•Œ๋Š” app.listen์€ ์„ค์ •ํ•˜์ง€ ์•Š์•„๋„ ์š”์ฒญ์— ์„ฑ๊ณตํ•˜๊ณ , IP๊นŒ์ง€ ๋‹ค๋ฅด๋ฉด app.listen๊ณผ ๋™์‹œ์— Cors ์„ค์ •๊นŒ์ง€ ๊ฐ™์ด ํ•ด์ค˜์•ผ ํ•˜๋Š”๊ฑด๊ฐ€?

port๋งŒ ๋‹ค๋ฅผ ๋•Œ์—๋Š” ๋ธŒ๋ผ์šฐ์ €๋Š” ๋‹ค๋ฅธ ์ถœ์ฒ˜๋กœ ์ธ์‹ํ•˜๊ณ  Cors ์ •์ฑ…์ด ์ ์šฉ๋œ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ip๊ฐ€ ๊ฐ™๊ธฐ ๋•Œ๋ฌธ์— ์„œ๋ฒ„ ์ž…์žฅ์—์„œ๋Š” ์—ฌ์ „ํžˆ ๊ฐ™์€ ip์—์„œ ์š”์ฒญ์„ ๋ฐ›์œผ๋ฏ€๋กœ Cors  ์„ค์ •๋งŒ์œผ๋กœ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๊ฐ„์˜ ์š”์ฒญ์„ ํ—ˆ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. 

 

๋ฐ˜๋ฉด IP๊นŒ์ง€ ๋‹ค๋ฅผ ๋•Œ์—๋Š” ์„œ๋ฒ„๊ฐ€ ์™ธ๋ถ€ ๋„คํŠธ์›Œํฌ์—์„œ ์š”์ฒญ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก app.listen()์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„๋ฅผ 0.0.0.0(๋ชจ๋“  ๋„คํŠธ์›Œํฌ ์ธํ„ฐํŽ˜์ด์Šค)๋กœ ๋ฐ”์ธ๋”ฉ ํ•ด์•ผ ํ•œ๋‹ค.