CORS ๐Ÿ˜ซ

joonseokhuยท2021๋…„ 3์›” 18์ผ
58
post-thumbnail

์ฃผ๋‹ˆ์–ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์—๊ฒŒ CORS๋Š” ์–ด๋ ค์šด ๋ฌธ์ œ ์ค‘์— ํ•˜๋‚˜๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.
๋ณด์•ˆ ๊ด€๋ จ๋œ ์–ด๋–ค ์ด์œ ๋•Œ๋ฌธ์— ์—๋Ÿฌ๋ฅผ ๋‚ธ๋‹ค๋Š”๊ฒƒ๊นŒ์ง„ ์•Œ๊ฒ ๋Š”๋ฐ, ์—๋Ÿฌ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋ง‰๋ง‰ํ•˜๋‹ค.

ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๋กœ ๊ฐœ๋ฐœ์ž ์ปค๋ฆฌ์–ด๋ฅผ ์ด์–ด๋‚˜๊ฐ€๋ฉด์„œ, ์˜์™ธ๋กœ ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด (์ฃผ๋‹ˆ์–ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋“ , ์•„๋‹ˆ๋“  ์ƒ๊ด€์—†์ด) CORS์— ๋Œ€ํ•ด ์˜คํ•ดํ•˜๊ณ  ์žˆ๋Š” ๋ชจ์Šต์„ ๋ณด์•˜๋‹ค. ๋˜ CORS์—๋Ÿฌ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋งŽ์€ ๋ฐฉ๋ฒ•์ด ์ด๋ฏธ ์กด์žฌํ•˜์ง€๋งŒ, ๊ทธ๊ฒƒ๋“ค์„ ์ž˜ ๋ชจ๋ฅด๋Š” ์‚ฌ๋žŒ๋“ค์ด ๋งŽ์•˜๋‹ค๋Š”๊ฑธ ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค.

CORS์— ๋Œ€ํ•ด ์‚ฌ๋žŒ๋“ค์ด ์‰ฝ๊ฒŒ ํ• ๋งŒํ•œ ์˜คํ•ด ๋ช‡๊ฐ€์ง€๋ฅผ ๋ฐ”๋กœ์žก๊ณ , CORS๋กœ ์ธํ•œ ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•  ๋ฐฉ๋ฒ•์„ ๋ช‡๊ฐ€์ง€ ์ œ์‹œํ•ด๋ณด๊ฒ ๋‹ค.

CORS์— ๋Œ€ํ•œ ๋ช‡๊ฐ€์ง€ ์˜คํ•ด

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ๋งŒ ํ•ด๋ณธ ์›น๊ฐœ๋ฐœ์ž๋ผ๋ฉด ํ•ด๋ณผ๋งŒํ•œ CORS์— ๋Œ€ํ•œ ์˜คํ•ด๊ฐ€ ๋ช‡๊ฐ€์ง€ ์žˆ๋‹ค. ์ด๊ฒƒ๋“ค์„ ํ’€๊ณ ๋‚˜์„œ ํ•ด๊ฒฐ๋ฒ•์„ ์จ๋ณด๊ฒ ๋‹ค.

์˜คํ•ด 1: CORS ์—๋Ÿฌ๋Š” ์„œ๋ฒ„๊ฐ€ ๋ณด๋‚ด๋Š” ์—๋Ÿฌ๋‹ค.

CORS๋Š” CSRF ๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ๋ธŒ๋ผ์šฐ์ € ์ทจ์•ฝ์  ๊ณต๊ฒฉ์œผ๋กœ๋ถ€ํ„ฐ ๋ธŒ๋ผ์šฐ์ € ์‚ฌ์šฉ์ž๋ฅผ ๋ณดํ˜ธํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“  ๊ธฐ๋Šฅ์ด๋‹ค.

HTTP ํ‘œ์ค€ ์ŠคํŽ™์— ํฌํ•จ๋˜์–ด ์žˆ๊ณ , CORS ๊ด€๋ จ ๊ธฐ๋Šฅ์˜ ๊ตฌํ˜„์€ ๋ธŒ๋ผ์šฐ์ € ๊ฐœ๋ฐœ์‚ฌ์—๊ฒŒ ์ฑ…์ž„์ด ์žˆ๋‹ค. ์›น ํ‘œ์ค€ ๊ธฐ์ˆ ์„ ๋”ฐ๋ฅด๋Š” ์ •์ƒ์ ์ด๊ณ  ์ผ๋ฐ˜์ ์ธ ๋ธŒ๋ผ์šฐ์ €๋ผ๋ฉด CORS ์—ญ์‹œ ํ‘œ์ค€ ์ŠคํŽ™์— ๋งก๊ฒŒ ๊ตฌํ˜„๋˜์–ด ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ์ผ๋ฐ˜์ ์ธ ๋ธŒ๋ผ์šฐ์ € ๋ผ ํ•จ์€, ์ต์Šคํ”Œ๋กœ๋Ÿฌ๋ฅผ ์ œ์™ธํ•œ ํฌ๋กฌ, ์‚ฌํŒŒ๋ฆฌ, ํŒŒ์ด์–ดํญ์Šค, ์˜คํŽ˜๋ผ ๋“ฑ์„ ๋งํ•œ๋‹ค. ์ฆ‰, ํ‰๋ฒ”ํ•œ ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž๊ฐ€ ์†์‰ฝ๊ฒŒ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•„์„œ ์“ธ์ˆ˜ ์žˆ๋Š” ์ข…๋ฅ˜์˜ (IE ์ œ์™ธ...) ๋ธŒ๋ผ์šฐ์ €๋“ค์ด๋‹ค.
ํฌ๋กœ๋ฏธ์›€ ๊ธฐ๋ฐ˜์˜ ๋ธŒ๋ผ์šฐ์ € ์ค‘์—์„œ, ์ค‘์š”ํ•œ ๋ณด์•ˆ์ •์ฑ…๋“ค์„ ์˜๋„์ ์œผ๋กœ ๋น„ํ™œ์„ฑํ™”์‹œํ‚จ ๋ฒ„์ „์˜ ํŠน์ดํ•œ ๋ธŒ๋ผ์šฐ์ €๋“ค๋„ ์กด์žฌํ•˜๋Š”๋ฐ, ์ด ๊ฒฝ์šฐ CORS ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. (๋‹จ, ์ด๊ฑด CORS ์—๋Ÿฌ์— ๋Œ€ํ•œ ์˜ฌ๋ฐ”๋ฅธ ํ•ด๊ฒฐ๋ฒ•์€ ์•„๋‹ˆ๋‹ค.)

CORS ์ •์ฑ…์€ ์„œ๋ฒ„์— ์ €์žฅ๋˜์–ด์žˆ์œผ๋ฉฐ, ์ €์žฅ๋œ CORS ์ •์ฑ…์„ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ๋ณด๋‚ด์ฃผ๋Š” ์ผ์„ ์„œ๋ฒ„๊ฐ€ ๋งก๊ณ  ์žˆ๊ธด ํ•˜๋‹ค.
ํ•˜์ง€๋งŒ, ๊ทธ CORS์ •์ฑ…์„ ๋ณด๋‚ด๋‹ฌ๋ผ๊ณ  ์„œ๋ฒ„์—๊ฒŒ ์š”์ฒญํ•˜๋Š”๊ฑด ๋ธŒ๋ผ์šฐ์ €์ด๋‹ค.

  1. ๋จผ์ €, ๋ธŒ๋ผ์šฐ์ €์—์„œ http์š”์ฒญ์ด ๋ฐœ์ƒํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๋Š” ๋ฐœ์ƒํ•œ http์š”์ฒญ์ด CORS๊ฒ€์ฆ์„ ํ•ด์•ผํ•˜๋Š” ์ƒํ™ฉ์ธ์ง€ ํŒ๋‹จํ•œ๋‹ค.
  2. ๋ณด์•ˆ ์ •์ฑ…์ƒ ๊ฒ€์ฆ์ด ํ•„์š”ํ•œ ์ƒํ™ฉ์— ํ•ด๋‹นํ•˜๋ฉด CORS ๊ฒ€์ฆ์„ ์„œ๋ฒ„์— ์š”์ฒญํ•œ๋‹ค. (Preflight Request)
  3. ์„œ๋ฒ„์—๊ฒŒ์„œ ์‘๋‹ต๋ฐ›์€ CORS๊ฒ€์ฆ ์š”์ฒญ ๊ฒฐ๊ณผ์— ๋”ฐ๋ผ ๋ธŒ๋ผ์šฐ์ €๋Š” ๋ฐœ์ƒํ–ˆ๋˜ http์š”์ฒญ์„ ์ทจ์†Œ์‹œ์ผœ๋ฒ„๋ฆฌ๊ณ  ์—๋Ÿฌ๋ฅผ ๋ฑ‰๋Š”๋‹ค.

์ฆ‰, CORS ์—๋Ÿฌ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ฐœ์ƒํ•œ๋‹ค.

์˜คํ•ด 2: ์™ธ๋ถ€ ๊ณต๊ฒฉ์œผ๋กœ๋ถ€ํ„ฐ ์„œ๋ฒ„๋ฅผ ๋ณดํ˜ธํ•˜๊ธฐ ์œ„ํ•ด ํŠน์ • ๋„๋ฉ”์ธ/IP ์ด์™ธ์˜ ๊ฒฝ๋กœ๋กœ ๋“ค์–ด์˜ค๋Š” ์š”์ฒญ์„ ์ฐจ๋‹จํ•˜๋Š”๊ฒŒ CORS์—๋Ÿฌ์ด๋‹ค.

CORS๋Š” ๋ณด์•ˆ์ •์ฑ…์ค‘ ํ•˜๋‚˜์ด์ง€๋งŒ, ๋ณดํ˜ธ์˜ ๋Œ€์ƒ์€ ์„œ๋ฒ„๊ฐ€ ์•„๋‹ˆ๋‹ค.

CORS๋Š” HTTP ์š”์ฒญ ํ—ค๋” ์ค‘์—์„œ Origin ์ด๋ผ๋Š” ํ—ค๋”์™€ ๊ด€๋ จ๋˜์–ด ์žˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ €์—์„œ ajax ์š”์ฒญ์ด ๋ฐœ์ƒํ–ˆ์„๋•Œ, ํ˜„์žฌ ํŽ˜์ด์ง€์˜ ์ฃผ์†Œ์ฐฝ์— ์ ํžŒ ๋„๋ฉ”์ธ๊ณผ, ajax ์š”์ฒญ ๋Œ€์ƒ url์˜ ๋„๋ฉ”์ธ์ด ๊ฐ™์€ ๊ฒฝ์šฐ๋„ ์žˆ์ง€๋งŒ, ๋‹ค๋ฅธ ๊ฒฝ์šฐ๋„ ์žˆ๋‹ค. ์ „์ž์˜ ์ƒํ™ฉ์„ Same Origin Request (๋™์ผ์ถœ์ฒ˜ ์š”์ฒญ) ์ด๋ผ๊ณ  ๋ถ€๋ฅด๋ฉฐ, ํ›„์ž๋ฅผ Cross Origin Request (๊ต์ฐจ์ถœ์ฒ˜ ์š”์ฒญ) ์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

๋ธŒ๋ผ์šฐ์ €์—์„œ cross origin ์š”์ฒญ์ด ๋ฐœ์ƒํ–ˆ์„๋•Œ, ๋ธŒ๋ผ์šฐ์ €๋Š” ํ•ด๋‹น ์š”์ฒญ์— origin ํ—ค๋”๋ฅผ ์ž๋™์œผ๋กœ ๋ถ™์ธ๋‹ค. ํ˜„์žฌ ํŽ˜์ด์ง€์˜ ๋„๋ฉ”์ธ์ด Origin ํ—ค๋”์˜ ๊ฐ’์ด ๋œ๋‹ค.

http://www.abc.com/page/1 ํŽ˜์ด์ง€์—์„œ http://www.abc.com/api/products ๋กœ ajax ์š”์ฒญ์ด ๋ฐœ์ƒํ•  ๊ฒฝ์šฐ, ์š”์ฒญ์‹œ ํ˜„์žฌํŽ˜์ด์ง€์™€ ์š”์ฒญ ๋Œ€์ƒ์˜ ๋„๋ฉ”์ธ์ด ๊ฐ™์œผ๋ฏ€๋กœ same origin request (๋™์ผ์ถœ์ฒ˜์š”์ฒญ) ์ด๋ผ๊ณ  ํ• ์ˆ˜ ์žˆ๋‹ค.

http://www.abc.com/page/1 ํŽ˜์ด์ง€์—์„œ http://www.def.com/api/user ์œผ๋กœ ajax ์š”์ฒญ์„ ๋ณด๋‚ผ๊ฒฝ์šฐ, ์š”์ฒญ์‹œ ํ˜„์žฌํŽ˜์ด์ง€์™€ ์š”์ฒญ ๋Œ€์ƒ์˜ ๋„๋ฉ”์ธ์ด ๋‹ค๋ฅด๋ฏ€๋กœ cross origin request (๊ต์ฐจ์ถœ์ฒ˜์š”์ฒญ) ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.
๋ธŒ๋ผ์šฐ์ €๋Š” ํ•ด๋‹น ์š”์ฒญ์˜ ํ—ค๋”์— origin ํ—ค๋”๋ฅผ ์ž๋™์œผ๋กœ ์ถ”๊ฐ€ํ•˜๋ฉฐ, ๊ทธ ๊ฐ’์€ http://www.abc.com ์ด ๋œ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ๋ณดํ†ต ์„œ๋ฒ„์—๊ฒŒ ๋“ค์–ด์˜ค๋Š” ์š”์ฒญ๋“ค์€ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ ์˜ค๋Š”๊ฒŒ ์•„๋‹ˆ๋‹ค. ์„œ๋ฒ„๋ผ๋ฆฌ๋„ ์„œ๋กœ ์š”์ฒญ์„ ํ•œ๋‹ค.

๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•˜์ง€ ์•Š์€ ์„œ๋ฒ„๊ฐ„ ํ†ต์‹ ์ผ ๊ฒฝ์šฐ Origin ํ—ค๋”๋Š” ์ž๋™์œผ๋กœ ๋ถ™๋Š”๊ฒŒ ์•„๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๊ณ  ๋ชป๋ถ™์ด๋ƒ ํ•˜๋ฉด ๊ทธ๊ฒƒ๋„ ์•„๋‹ˆ๋‹ค. ์„œ๋ฒ„๊ฐ„ ํ†ต์‹ ์ผ๋•Œ ์š”์ฒญ์ž ์„œ๋ฒ„๋Š” ์›ํ•˜๋ฉด Origin ํ—ค๋”๋ฅผ ์•ˆ ๋„ฃ์–ด๋„ ๋˜๊ณ , ๋„ฃ๊ณ ์‹ถ์œผ๋ฉด Origin์˜ ๊ฐ’์œผ๋กœ ์•„๋ฌด ๋ฌธ์ž์—ด์ด๋‚˜ ๋งˆ์Œ๋Œ€๋กœ ๋„ฃ์–ด์„œ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋‹ค.์ฆ‰ ์„œ๋ฒ„๊ฐ„ ์š”์ฒญ ์ƒํ™ฉ์—์„œ CORS์ •์ฑ…์€ ๋ณด์•ˆ์ƒ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€์ง€ ์•Š๋Š”๋‹ค.

์„œ๋ฒ„๊ฐ€ ํŠน์ • ์š”์ฒญ์ž์—๊ฒŒ๋งŒ ์š”์ฒญ์„ ํ—ˆ์šฉํ•ด์•ผ ํ• ๋•, ์ธ์ฆํ† ํฐ์ด๋‚˜ ๋ณด์•ˆํ‚ค ๋“ฑ ๋” ํ™•์‹คํ•˜๊ณ  ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

์˜คํ•ด 3: ํ”„๋ก ํŠธ์—”๋“œ์—์„œ AJAX ์š”์ฒญ ๋ณด๋‚ผ๋•Œ ์–ด๋–ค ํŠน๋ณ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์–ด๋–ค ์„ค์ •์„ ์ž˜ ํ•ด์„œ ์š”์ฒญํ•œ๋‹ค๋ฉด CORS ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

๋งŒ์ผ ์–ด๋–ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ์„ค์ •์„ ํ†ตํ•ด, CORS ์—๋Ÿฌ๋ฅผ ์šฐํšŒํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๋ฉด, ๊ทธ๊ฑด ๋ธŒ๋ผ์šฐ์ € ๋ณด์•ˆ ์ทจ์•ฝ์ ์ด๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ ์†Œ์Šค์ฝ”๋“œ๋งŒ์œผ๋กœ CORS ์—๋Ÿฌ๋ฅผ ์šฐํšŒํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์—†์–ด์•ผ ํ•œ๋‹ค.

๋งŒ์•ฝ ์–ด๋– ํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ๋งŒ์œผ๋กœ CORS ์—๋Ÿฌ๋ฅผ ์šฐํšŒํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐœ๊ฒฌํ–ˆ๋‹ค๋ฉด, ๋ฐ˜๋“œ์‹œ ํ•ด๋‹น ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ฐœ๋ฐœํ•œ ๊ธฐ์—… ๋˜๋Š” ์˜คํ”ˆ์†Œ์Šค ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์•Œ๋ ค์ฃผ์ž. ์ทจ์•ฝ์ ์„ ์ฐพ์•„์คฌ๋‹ค๋ฉฐ ๊ณ ๋งˆ์›Œํ• ๊ฒƒ์ด๋‹ค.

ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

์ƒํ™ฉ์—๋”ฐ๋ผ ์ตœ์„ ์˜ ๋Œ€์ฒ˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋‹ค ๋‹ค๋ฅด๋‹ค.

ํ•ด๋‹น API ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์š”์ฒญํ•˜๊ธฐ

์ด ๋ฐฉ๋ฒ•์€

  • ํ•ด๋‹น API๋ฅผ ๊ฐ™์€ ํšŒ์‚ฌ/ํŒ€์˜ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋งŒ๋“ ๊ฒƒ์ผ ๋•Œ

๊ทธ๋ฆฌ๊ณ 

  • ์ด API๋ฅผ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋งŒ๋“ ์ง€ ์–ผ๋งˆ ์•ˆ๋ผ์„œ ์ด์ œ ๋ง‰ ํ…Œ์ŠคํŠธ ํ•ด๋ณด๋Š” ๋‹จ๊ณ„์ผ๋•Œ
  • ๋˜๋Š”, CORS ์—๋Ÿฌ๊ฐ€ ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์—์„œ๋„ ๋‚˜๋Š” ๊ฒƒ ๊ฐ™์„๋•Œ

๊ฐ€์žฅ ์ ํ•ฉํ•œ ๋ฐฉ๋ฒ•์ด๋‹ค.

๋ฐฑ์—”๋“œ ๋ง‰ ์„ธํŒ…ํ–ˆ์„๋•Œ ๋ฐฑ์—”๋“œ๊ฐœ๋ฐœ์ž๊ฐ€ ์‹ค์ˆ˜๋กœ CORS ๊ด€๋ จ ์„ค์ •์„ ๊นŒ๋จน์„ ๋•Œ๊ฐ€ ์žˆ๋‹ค. (๋‚˜๋„ ์ž์ฃผ ๊ทธ๋Ÿฐ๋‹ค)

๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ํ˜„ ์ƒํ™ฉ์„ ๋งํ•ด์ฃผ๋ฉด ๋†’์€ ํ™•๋ฅ ๋กœ ๊ฐ€์Šค๋ฒจ๋ธŒ ์•ˆ ์ž ๊ทธ๊ณ  ์ง‘ ๋‚˜์˜จ ์‚ฌ๋žŒ๋งˆ๋ƒฅ "์•„! ๋งž๋‹ค"๋ฅผ ์—ฐ๋ฐœํ•˜๋ฉฐ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ์žˆ๋Š” ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž์˜ ๋ชจ์Šต์„ ๋ณด๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„œ๋ฒ„ ํ”„๋ก์‹œ ํ™˜๊ฒฝ์„ค์ •

์ด ๋ฐฉ๋ฒ•์€

  • ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ create-react-app ๋˜๋Š” vue-cli ์™€ ๊ฐ™์€ ์ฃผ์š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๊ณต์‹ ํ”„๋กœ์ ํŠธ ์„ธํŒ… ํˆด์„ ํ†ตํ•ด ์„ธํŒ…ํ–ˆ์„ ๋•Œ
  • ๋˜, ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์—์„œ๋Š” cors ์—๋Ÿฌ๊ฐ€ ๋‚˜์ง€ ์•Š๋„๋ก ๋ฐฑ์—”๋“œ cors ์„ค์ •์ด๋‚˜ ์ธํ”„๋ผ ๊ตฌ์„ฑ์ด ๋˜์–ด์žˆ์–ด์„œ, ๋กœ์ปฌ์—์„œ ๊ฐœ๋ฐœํ• ๋•Œ๋งŒ cors ์ด์Šˆ๊ฐ€ ์žˆ๋Š”์ƒํ™ฉ์ผ๋•Œ

์ ํ•ฉํ•˜๋‹ค.

๋˜, ๋ฆฌ์•กํŠธ ํ•œ์ •์œผ๋กœ ์ถ”๊ฐ€ ์กฐ๊ฑด์ด ๋” ์žˆ๋Š”๋ฐ (vue๋Š” ์‹ ๊ฒฝ์“ฐ์ง€ ์•Š์•„๋„ ๋œ๋‹ค.)
cors ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” api๊ฐ€, ๋‚ด๊ฐ€ ์ฃผ๋กœ ์“ฐ๊ฒŒ ๋  api ์ผ๋•Œ ์—ฌ์•ผ ํ•œ๋‹ค.
(์ฆ‰ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ์™ธ๋ถ€ api ์—ฌ๋Ÿฌ๊ฐœ๋ฅผ ์„ž์–ด์“ฐ๋Š”๋ฐ, ๋‹ค๋“ค cors๊ฐ€ ๋‚˜๋Š” ์ƒํ™ฉ์€ ์•„๋‹ˆ์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ)

create-react-app

๊ณต์‹๋ฌธ์„œ: https://create-react-app.dev/docs/proxying-api-requests-in-development

package.json ์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.
ํ…Œ์ŠคํŠธ ํ•˜๋Š”๋™์•ˆ ์‚ฌ์šฉํ•  ํ…Œ์ŠคํŠธ์šฉ api ์„œ๋ฒ„์˜ ๋„๋ฉ”์ธ์„ ์•„๋ž˜ ์ฝ”๋“œ์˜ http://my-api-server.com ๋ผ ์จ์žˆ๋Š” ๋ถ€๋ถ„์— ๋Œ€์ž…ํ•ด์„œ ์“ฐ์ž

"proxy": "http://my-api-server.com"

vue cli

๊ณต์‹๋ฌธ์„œ: https://cli.vuejs.org/config/#devserver-proxy

vue.config.js ํŒŒ์ผ์— (๋งŒ์•ฝ ์ด ํŒŒ์ผ์ด ์—†๋‹ค๋ฉด, package.json ๊ณผ ๊ฐ™์€ ๊ฒฝ๋กœ์— ๋งŒ๋“ค์ž)

๋‹ค์Œ๊ณผ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜์ž

module.exports = {
  devServer: {
    proxy: 'http://my-api-server.com'
  }
}

์—ฌ๋Ÿฌ๊ฐœ์˜ api ์„œ๋ฒ„์— ๋Œ€ํ•ด ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ค˜์•ผ ํ•œ๋‹ค๋ฉด, ๊ณต์‹๋ฌธ์„œ๋ฅผ ๋ณด๋ฉด์„œ ์กฐ๊ธˆ ๋” ์„ค์ •์„ ์ปค์Šคํ…€ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

์ง์ ‘ proxy ์„œ๋ฒ„ ๋งŒ๋“ค๊ธฐ

์ด ๋ฐฉ๋ฒ•์€ ์œ„์˜ ๋ฐฉ๋ฒ•๋“ค์ด ํ†ตํ•˜์ง€ ์•Š์„๋•Œ ํ•  ์ˆ˜ ์žˆ๋Š” ์ตœํ›„์˜ ๋ฐฉ๋ฒ•์ด๋‹ค.
๋ชจ๋“  ์ƒํ™ฉ์— ๋Œ€ํ•ด ์™„๋ฒฝํ•˜๊ฒŒ ๋งž์ถค ๋Œ€์‘์ด ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ์น˜๋ช…์ ์ธ ๋‹จ์ ์ด ํ•˜๋‚˜ ์žˆ๋‹ค.
๋ฐ”๋กœ ๋‹น์‹ ์ด ๋ฐฑ์—”๋“œ๋ฅผ ๋งŒ์งˆ ์ค„ ์•Œ์•„์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ

๊ธ€ ์œ—์ชฝ์—์„œ, ์„œ๋ฒ„๊ฐ„ ํ†ต์‹ ์€ CORS์˜ ์˜ํ–ฅ์„ ์•ˆ๋ฐ›๋Š”๋‹ค๊ณ  ์จ๋‘”๊ฒŒ ๋Œ€๋ชฉ์ด ์žˆ์—ˆ๋‹ค. (์•„๋ฌด๋„ ์•ˆ์ฝ์—ˆ๊ฒ ์ง€๋งŒ)

api ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ›์•„์•ผ ํ•  ์š”์ฒญ์„ ๋Œ€์‹  ์š”์ฒญํ•ด์„œ ํ”„๋ก ํŠธ์—”๋“œ์— ์‘๋‹ตํ•ด์ฃผ๋Š” ์„œ๋ฒ„๋ฅผ ๊ฐœ๋ฐœํ™˜๊ฒฝ์— ๋งŒ๋“ค์–ด๋‘๊ณ , cors ์ •์ฑ…์„ ๋‚ด ๋ง˜๋Œ€๋กœ ์ฃผ๋ฌด๋ฅธ ๋’ค, ๊ฐœ๋ฐœ๊ณผ์ •๋™์•ˆ api์š”์ฒญ์„ ๊ฑฐ๊ธฐ๋กœ ๋ณด๋‚ด๋ฉด ๋œ๋‹ค.

ํ•˜์ง€ ๋ง์•„์•ผ ํ•  ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•๋“ค

๋ฐฑ์—”๋“œ์—๊ฒŒ, ํ•ญ์ƒ ํ—ˆ์šฉ์œผ๋กœ CORS ์ •์ฑ… ๋ฐ”๊ฟ”๋‹ฌ๋ผ๊ณ  ํ•˜๊ธฐ

ํ”„๋ก ํŠธ์—”๋“œ์˜ ๋จธ๋ฆฌ๋ฅผ ์ฅ์–ด๋œฏ๊ฒŒ ๋งŒ๋“ค๊ณ  ๋ฐฑ์—”๋“œ๋ฅผ ๊ท€์ฐฎ๊ฒŒ ๋งŒ๋“œ๋Š” ์›ํ‰์ธ๋ฐ๋„ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ € ๋ฒค๋”๋“ค์ด ์—ด์‹ฌํžˆ ์ด ๋ช…์„ธ๋ฅผ ๋งŒ๋“ค๊ณ  ๊ด€๋ฆฌํ•˜๊ณ  ๋”ฐ๋ฅด๋Š” ๋ฐ์—๋Š” ์ด์œ ๊ฐ€ ์žˆ๋‹ค. ํ˜„๊ด€๋ฌธ ๋„์–ด๋ฝ ๋งค๋ฒˆ ์—ฌ๋Š”๊ฒŒ ๊ท€์ฐฎ๋‹ค๊ณ  ์•„๋ฌด๋„ ๋„์–ด๋ฝ์„ ๋œฏ์–ด๋‘๊ณ  ์‚ด์ง„ ์•Š๋Š”๋‹ค.

๋ธŒ๋ผ์šฐ์ € ๋ณด์•ˆ๊ธฐ๋Šฅ์ด ๋น„ํ™œ์„ฑํ™”๋œ ์ปค์Šคํ…€ ๋ธŒ๋ผ์šฐ์ € ์‚ฌ์šฉํ•ด์„œ ๊ฐœ๋ฐœํ•˜๊ธฐ

์•ž์„œ ์–ธ๊ธ‰ํ–ˆ๋˜, CORS๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•ด๋‘” ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์“ฐ๋Š” ๋ฐฉ๋ฒ• ์—ญ์‹œ ์ข‹์€ ๋Œ€์ฒ˜๋ฒ•์ด ์•„๋‹ˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ €์—์„œ CORS๋ฅผ ๋น„ํ™œ์„ฑํ™” ํ•ด์„œ ํ”„๋ก ํŠธ์—”๋“œ์—์„œ API๋ฅผ ๋ถ™์ด๋ฉด, ๋‚˜๋Š” CORS ์—๋Ÿฌ๋ฅผ ์•ˆ๊ฒช๊ฒ ์ง€๋งŒ, ์ผ๋ฐ˜์ ์ธ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์“ฐ๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒ, ๋‹ค์‹œ ๋งํ•ด ๋‚˜๋ฅผ ์ œ์™ธํ•œ ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์—๊ฒ ์—ฌ์ „ํžˆ ์—๋Ÿฌ๊ฐ€ ๋‚˜๊ณ ์žˆ๋Š”๊ฑฐ๋‹ค.

๊ฐœ๋ฐœํ™˜๊ฒฝ์—์„œ๋งŒ CORS ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๊ณ  ์žˆ๋Š”๊ฑฐ๋ผ๊ณ  ํ™•์‹ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ, ์Šคํ…Œ์ด์ง•/ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ ํ…Œ์ŠคํŠธ ํ• ๋• CORS ๋ฌธ์ œ๊ฐ€ ๋‚˜๋”๋ผ๋„ ์•Œ์•„์ฑ„๊ธฐ๊ฐ€ ์–ด๋ ค์›Œ์ง€๊ฒŒ ๋˜๊ณ , ํ”„๋กœ๋•์…˜ ๋ฐฐํฌํ›„ ์žฅ์• ๋ฅผ ๊ฒช์„ ๊ฐ€๋Šฅ์„ฑ์ด ์ƒ๊ธด๋‹ค.

ํ•˜์ง€๋งŒ ์ €๋Š” ๋ฐฑ์—”๋“œ๋ฅผ ๋งŒ์งˆ ์ค„ ๋ชจ๋ฅด๋Š”๋ฐ์š”...

๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์ด ์žˆ์„๊ฒƒ ๊ฐ™์•„์„œ, nodeJS๋กœ ๋งŒ๋“  ๊ฐ„๋‹จํ•œ ํ”„๋ก์‹œ ์„œ๋ฒ„๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด๋ดค๋‹ค.

https://github.com/joonseokhu/api-proxy-server

๊ธ‰ํ•˜๊ฒŒ ๋งŒ๋“ ๊ฑฐ๋ผ ์–ด๋–จ์ง„ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ, ํ•œ๋ช…์—๊ฒŒ๋ผ๋„ ๋„์›€์ด ๋˜์—ˆ์œผ๋ฉด ํ•œ๋‹ค.

profile
ํ’€์Šคํƒ ์ง‘์š”์ •

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

comment-user-thumbnail
2021๋…„ 4์›” 27์ผ

์˜ค์šฐ ์ž˜ ์ง€๋‚ด์‹œ์ฃ ?

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2021๋…„ 4์›” 28์ผ

์ •๋ฆฌ๋ฅผ ๋˜๊ฒŒ ์ž˜ํ•˜์…จ๋„ค์š” ๐Ÿ‘

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2021๋…„ 4์›” 29์ผ

์ €๋„ CORS๋•Œ๋ฌธ์— ๋งŒ๋“  ํ”„๋ก์‹œ ์„œ๋ฒ„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
https://cors-proxy.org/

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ