94์ผ์ฐจ

๊ทธ๋ฃจํŠธยท2021๋…„ 12์›” 18์ผ
0

ํ•ญํ•ด TIL (Today I learned)

๋ชฉ๋ก ๋ณด๊ธฐ
81/85

CORS

Link ๐Ÿ”ฅ

CORS๊ฐ€ ๋ญ”๊ฐ€์š”?

CORS๋Š” Cross Origin Resource Sharing์˜ ์•ฝ์ž๋กœ, ๊ต์ฐจ ์ถœ์ฒ˜ ๊ณต์œ ๋ผ๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค.

Origin์€ โ‘  scheme, โ‘ก host, โ‘ข port ๋กœ ์ด๋ฃจ์–ด์ง„ ๋„๋ฉ”์ธ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. (IE์˜ ๊ฒฝ์šฐ port๋ฅผ ๋น„๊ตํ•˜์ง€ ์•Š์Œ)

https://www.naver.com/

โ‘  scheme : https
โ‘ก host: www.naver.com
โ‘ข port: null (๊ณต๊ฐœ๋˜์ง€ ์•Š์Œ)

ํ˜„์žฌ โ‘  ์ž์‹ ์ด ์†ํ•œ ์ถœ์ฒ˜(Origin)๋ฅผ ๊ธฐ์ค€์œผ๋กœ โ‘ก ๋‹ค๋ฅธ ์ถœ์ฒ˜(Origin)์— API๋ฅผ ์š”์ฒญํ•˜๊ฒŒ ๋˜๋ฉด ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ด ์š”์ฒญ์œผ๋กœ ๋„˜์–ด์˜ค๋Š” ๊ฒฝ๊ณผ๊ฐ€ ์•ˆ์ „ํ•œ์ง€ ํŒ๋‹จํ•˜๊ฒŒ ๋˜๋Š”๋ฐ,

์‘๋‹ต์„ ๋ณด๋‚ด๋Š” ์ถœ์ฒ˜๊ฐ€ โ‘  ์ž์‹ ์ด ์†ํ•œ ์ถœ์ฒ˜๊ฐ€ ์•„๋‹Œ, โ‘ก ๋‹ค๋ฅธ ์ถœ์ฒ˜์—ฌ๋„ ์„œ๋กœ ์˜ˆ์ƒ๋˜๋Š” ์ถœ์ฒ˜๋ผ๋ฉด ์š”์ฒญ์— ๋Œ€ํ•ด ํ—ˆ์šฉํ•ด์ฃผ๋Š” ์‘๋‹ต ํ—ค๋”๋ฅผ ๋ณด๋‚ด, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์‘๋‹ต ๊ฒฐ๊ณผ๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

์ด๋ฅผ CORS(Cross Origin Resource Sharing)์ด๋ผ ํ•ฉ๋‹ˆ๋‹ค.

์™œ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ CORS ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๋‚˜์š”?

๋ชจ๋“  ์„œ๋ฒ„๋“ค์ด ๋‹ค CORS๋ฅผ ์ธ์ง€ํ•˜์ง€๋Š” ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๊ฒฐ๊ณผ์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ €๋Š” ๊ฑฐ๋ถ€ํ–ˆ๋‹ค๊ณ  ํ•˜๋”๋ผ๋„, ์„œ๋ฒ„๋Š” ์ฒ˜๋ฆฌํ•ด๋ฒ„๋ฆฌ๋Š” ๊ฒฐ๊ณผ๊ฐ€ ์ƒ๊ธธ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—

์„œ๋ฒ„๊ฐ€ ์•ˆ์ „ํ•˜๊ฒŒ ์š”์ฒญ์„ ์ฃผ๊ณ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ•ด๋‹น ์š”์ฒญ(CORS)์„ ์ฒ˜๋ฆฌํ•œ๋‹ค

์‹ค์ œ ์š”์ฒญ์—์„œ๋Š” ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋‚˜์š”?

CORS๋Š” ๋‹ค๋ฅธ Origin์— ๋Œ€ํ•œ ์š”์ฒญ์„ ํ—ˆ์šฉํ•˜๋Š” ์ •์ฑ…์ž…๋‹ˆ๋‹ค.

๊ฐ™์€ Origin์—์„œ http ํ†ต์‹ ์„ ํ•˜๋Š” ๊ฒฝ์šฐ ์•Œ์•„์„œ cookie๊ฐ€ request header์— ๋“ค์–ด๊ฐ€์ง€๋งŒ, ๊ต์ฐจ ์ถœ์ฒ˜๋กœ ์š”์ฒญํ•˜๋Š” ์ƒํ™ฉ์—์„œ๋Š” ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

Origin์ด ๋‹ค๋ฅธ http ํ†ต์‹ ์—์„œ๋Š” request header์— ์ฟ ํ‚ค๊ฐ€ ์ž๋™์œผ๋กœ ๋“ค์–ด๊ฐ€๊ธฐ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์„œ๋ฒ„์—๊ฒŒ ๋˜๋Š” ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ๋‚ด๊ฐ€ ์–ด๋–ค ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ์ง€ ์•Œ๋ ค์ค„ ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ > WithCredentials: true

์„œ๋ฒ„ > Access-Control-Allow-Credentials: true

CORS๋ฅผ ๊ฒช๊ณ  ์ง์ ‘ ํ•ด๊ฒฐํ•ด ๋ณธ ๊ฒฝํ—˜์ด ์žˆ์œผ๋ฉด ๋งํ•ด์ฃผ์„ธ์š”

  1. ์„œ๋ฒ„ ๊ฐœ๋ฐœ์ž์™€ ๋น ๋ฅด๊ฒŒ ์†Œํ†ตํ•œ๋‹ค

๋งŒ์•ฝ ํ”„๋ก ํŠธ์—์„œ CORS๊ด€๋ จ ์„ค์ •์ด ๋‹ค ๋๋‚œ ์ดํ›„์— HTTP ์š”์ฒญ์„ ๋ณด๋ƒˆ์„ ๋•Œ CORS ์˜ค๋ฅ˜๊ฐ€ ๋œฐ ๊ฒฝ์šฐ ํ•ด๋‹น ์˜ค๋ฅ˜๋ฅผ ์บก์ณํ•ด์„œ ๊ฐ™์ด ํ™•์ธํ•ด๋ณด๋Š” ๋ฐฉ๋ฒ•

๋จผ์ € ํ”„๋ก ํŠธ์—์„œ ์‘๋‹ต ํ—ค๋”์— ์ œ๋Œ€๋กœ ๋œ ์ •๋ณด๋ฅผ ๋„ฃ์–ด๋Š” ์ง€ ํ™•์‹ ์„ ๊ฐ€์ง€๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค (credentials ๊ด€๋ จ ์„ค์ •์„ ํ–ˆ๋Š”์ง€?)

  1. ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์— ํ”„๋ก์‹œ ์„ค์ •์„ ํ•ด๋‘”๋‹ค

๋งŒ์•ฝ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์— ์žˆ์–ด์„œ ์„ธํŒ…์„ ์ž˜ ํ•ด๋†“์€ ์ƒํƒœ์ด๊ณ  ์„œ๋ฒ„์˜ ์„ธํŒ…์ด ์™„๋ฒฝํ•จ์—๋„ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธด๋‹ค๋ฉด, ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ์˜ ํ”„๋ก์‹œ ์„ค์ •๋„ ๋Œ€์•ˆ์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๋‹น ํ”„๋ก์‹œ ์„ค์ •์€ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ (CRA๋ฉด CRA) ๋ฐฉ๋ฒ•์ด ๋‹ค๋ฅด๋ฏ€๋กœ ํ™•์ธํ•ด๋ณด๊ณ  ๋„ฃ์œผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค!


๋งˆ์น˜๋ฉฐ..

axios๋กœ ์„œ๋ฒ„ ์ธก๊ณผ ํ†ต์‹  ํ•˜๋Š” ๊ณผ์ •์—์„œ ํ”„๋ก ํŠธ์ชฝ axios์ฝ”๋“œ์— CORS๋ฅผ ์„ค์ • ํ•˜์ง€์•Š์•„.
์„œ๋ฒ„์ธก์—์„œ ์˜ค๋Š” ์ฟ ํ‚ค ๋ฐ์ดํ„ฐ๊ฐ€ ์•ˆ์ „ํ•˜์ง€์•Š๋‹ค๊ณ  ์ƒ๊ฐํ•˜์—ฌ ๋ฐ›์ง€ ์•Š๊ณ  ์žˆ์—ˆ๊ณ  ๊ทธ๋กœ์ธํ•ด ์ฟ ํ‚ค๊ฐ€ ์ œ๋Œ€๋กœ ์ €์žฅ ๋˜์ง€์•Š์•˜๋‹ค.
์ฒ˜์Œ์—” ๋ฌธ์ œ์ ๊ฐ€ ๋จผ์ง€ ์ฐพ์ง€๋ชปํ•ด ๊ณ ์ƒ์„ ํ–ˆ๋Š”๋ฐ ๊ฒ€์ƒ‰์„ ํ†ตํ•ด ๊ณต๋ถ€ํ•˜๊ณ  withCredentials: true, ์„ ์ถ”๊ฐ€ํ•ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์—ˆ๋‹ค.
๋ฉด์ ‘์„ ๋ณด๊ธฐ ์œ„ํ•ด cs์— ๋Œ€ํ•ด ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ์žˆ๋Š”๋ฐ ์‹ค์ „๋„ ์ข‹์ง€๋งŒ ์ด๋Ÿฐ ๊ฐœ๋…๋“ค ์ž์ฒด๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์ดํ•ดํ•˜๋Š”๊ฒƒ์ด ์ •๋ง ์ค‘์š”ํ•˜๋‹ค๋Š”๊ฑธ ๋งŽ์ด ๋Š๊ผˆ๋‹ค.
์‹ค์ „๋„ ์ข‹์ง€๋งŒ ์ด๋ก  ๊ณต๋ถ€๋„ ๊พธ์ค€ํžˆ ํ•ด์•ผํ• ๊บผ ๊ฐ™๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€