CORS(Cross-Origin Resource Sharing)๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ๋„๋ฉ”์ธ ๊ฐ„์˜ ์•ˆ์ „ํ•œ ํ†ต์‹  ๋ฐ ๋ฐ์ดํ„ฐ ๊ตํ™˜์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ์ตœ์‹  ์›น ๊ฐœ๋ฐœ์˜ ๊ธฐ๋ณธ ๋ณด์•ˆ ๋ฉ”์ปค๋‹ˆ์ฆ˜์ž…๋‹ˆ๋‹ค. ์ด๋Š” ํŠนํžˆ ๋ถ„์‚ฐ ์‹œ์Šคํ…œ ๋ฐ ํด๋ผ์šฐ๋“œ ๊ธฐ๋ฐ˜ ์ธํ”„๋ผ์˜ ๋งฅ๋ฝ์—์„œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ž‘๋™ํ•˜๋Š” ๋ฐ ํ•„์ˆ˜์ ์ธ ๊ตฌ์„ฑ ์š”์†Œ์ž…๋‹ˆ๋‹ค. CORS๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ•˜๋‚˜์˜ ๋„๋ฉ”์ธ(์›๋ณธ)์—์„œ ์‹คํ–‰๋˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์›น ๋ธŒ๋ผ์šฐ์ €์— ๋‚ด์žฅ๋œ SOP(๋™์ผ ์›๋ณธ ์ •์ฑ…)๋ฅผ ์œ„๋ฐ˜ํ•˜์ง€ ์•Š๊ณ  ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์˜ ๊ธ€๊ผด, ์ด๋ฏธ์ง€, ์Šคํฌ๋ฆฝํŠธ ๋˜๋Š” API ๋ฐ์ดํ„ฐ์™€ ๊ฐ™์€ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. SOP๋Š” ์›น ํŽ˜์ด์ง€๊ฐ€ ๋‹ค๋ฅธ ์›๋ณธ์˜ ๋ฆฌ์†Œ์Šค์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ๊ฒƒ์„ ์ œํ•œํ•˜์—ฌ XSRF(๊ต์ฐจ ์‚ฌ์ดํŠธ ์š”์ฒญ ์œ„์กฐ) ๋ฐ XSS(๊ต์ฐจ ์‚ฌ์ดํŠธ ์Šคํฌ๋ฆฝํŒ…) ๊ณต๊ฒฉ๊ณผ ๊ฐ™์€ ์ž ์žฌ์ ์ธ ๋ณด์•ˆ ์ทจ์•ฝ์„ฑ์œผ๋กœ๋ถ€ํ„ฐ ์‚ฌ์šฉ์ž๋ฅผ ๋ณดํ˜ธํ•˜๋Š” ๋ณด์•ˆ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

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

์‹คํ–‰ ์ „ ์š”์ฒญ์€ ์„œ๋ฒ„๊ฐ€ ์‹ค์ œ ์š”์ฒญ์ด ์„ฑ๊ณตํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ CORS ์„ค์ •์„ ์ง€์›ํ•˜๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ์‹ค์ œ ์š”์ฒญ ์ „์— ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ณด๋‚ธ HTTP OPTIONS ์š”์ฒญ์ž…๋‹ˆ๋‹ค. ์„œ๋ฒ„๋Š” ํŠน์ • CORS ๊ด€๋ จ ํ—ค๋”๋กœ ์‘๋‹ตํ•˜์—ฌ ์›๋ณธ ๊ฐ„ ์š”์ฒญ๊ณผ ์ถ”๊ฐ€ ์กฐ๊ฑด ๋˜๋Š” ์ œํ•œ ์‚ฌํ•ญ(์˜ˆ: ํ—ˆ์šฉ๋œ HTTP ๋ฉ”์„œ๋“œ ๋ฐ ํ—ค๋”)์„ ์ˆ˜๋ฝํ•  ์˜์‚ฌ๊ฐ€ ์žˆ์Œ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์‹คํ–‰ ์ „ ์š”์ฒญ์ด ์„ฑ๊ณตํ•˜๋ฉด ํด๋ผ์ด์–ธํŠธ๋Š” HTTP GET, POST, PUT, DELETE ๋˜๋Š” ๊ธฐํƒ€ ์ง€์›๋˜๋Š” ๋ฐฉ๋ฒ•์ด ๋  ์ˆ˜ ์žˆ๋Š” ์‹ค์ œ ์š”์ฒญ์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

CORS๋ฅผ ์ง€์›ํ•˜๋ ค๋ฉด ์›น ์„œ๋ฒ„์™€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์‘๋‹ต์— ์ ์ ˆํ•œ CORS ๊ด€๋ จ HTTP ํ—ค๋”๊ฐ€ ํฌํ•จ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํ—ค๋”์—๋Š” ๋‹ค์Œ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

  • Access-Control-Allow-Origin : ๋ฆฌ์†Œ์Šค์— ์ ‘๊ทผ์ด ํ—ˆ์šฉ๋œ ์›๋ณธ(๋„๋ฉ”์ธ)์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ํŠน์ • ๋„๋ฉ”์ธ์ด๋‚˜ ์™€์ผ๋“œ์นด๋“œ(*)๋กœ ์„ค์ •ํ•˜์—ฌ ๋ชจ๋“  ๋„๋ฉ”์ธ์„ ํ—ˆ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • Access-Control-Allow-Methods : GET, POST, PUT, DELETE ๋“ฑ๊ณผ ๊ฐ™์€ ์›๋ณธ ๊ฐ„ ์š”์ฒญ์— ํ—ˆ์šฉ๋˜๋Š” HTTP ๋ฉ”์„œ๋“œ๋ฅผ ๋‚˜์—ดํ•ฉ๋‹ˆ๋‹ค.
  • Access-Control-Allow-Headers : Content-Type, Authorization ๋“ฑ๊ณผ ๊ฐ™์€ ์›๋ณธ ๊ฐ„ ์š”์ฒญ์— ํ—ˆ์šฉ๋˜๋Š” HTTP ํ—ค๋”๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
  • Access-Control-Expose-Headers : ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„์˜ ์‘๋‹ต์—์„œ ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋Š” ํ—ค๋”๋ฅผ ๋‚˜์—ดํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„์—์„œ ์‚ฌ์šฉ์ž ์ •์˜ ํ—ค๋”๋ฅผ ์ฝ์„ ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
  • Access-Control-Allow-Credentials : ์ฟ ํ‚ค ๋˜๋Š” ๊ธฐํƒ€ ์ž๊ฒฉ ์ฆ๋ช…์„ ์‚ฌ์šฉํ•œ ์›๋ณธ ๊ฐ„ ์š”์ฒญ์ด ํ—ˆ์šฉ๋˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
  • Access-Control-Max-Age : ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์‹คํ–‰ ์ „ ์š”์ฒญ ๊ฒฐ๊ณผ๋ฅผ ์บ์‹œํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ๋Œ€ ์‹œ๊ฐ„(์ดˆ)์„ ์ง€์ •ํ•˜์—ฌ ์—ฌ๋Ÿฌ ์‹คํ–‰ ์ „ ์š”์ฒญ์˜ ํ•„์š”์„ฑ์„ ์ค„์ž…๋‹ˆ๋‹ค.

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

AppMaster ์˜ CORS ๊ธฐ๋ณธ ์ง€์› ์™ธ์—๋„ ์›น ๊ฐœ๋ฐœ์ž๋Š” ๋‹ค์–‘ํ•œ ์˜คํ”ˆ ์†Œ์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋ฏธ๋“ค์›จ์–ด ์†”๋ฃจ์…˜์„ ํ™œ์šฉํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ CORS๋ฅผ ํ™œ์„ฑํ™”ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ถ€ ์ธ๊ธฐ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • Node.js ๋ฐ Express์šฉ cors
  • Ruby ๋ฐ Rack ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์šฉ rack-cors
  • Django ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์šฉ django-cors-headers
  • Flask ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์šฉ flask-cors

๊ฒฐ๋ก ์ ์œผ๋กœ CORS(Cross-Origin Resource Sharing)๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ๋„๋ฉ”์ธ ๊ฐ„์— ๋ฆฌ์†Œ์Šค์™€ ๋ฐ์ดํ„ฐ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ์˜ ์ค‘์š”ํ•œ ์ธก๋ฉด์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋™์ผ ์ถœ์ฒ˜ ์ •์ฑ…์˜ ํ•œ๊ณ„๋ฅผ ๊ทน๋ณตํ•˜๋Š” ๋™์‹œ์— ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํ˜ธ ์—ฐ๊ฒฐ๋œ ์„ธ๊ณ„์— ํ•„์š”ํ•œ ๋ณด์•ˆ ์ˆ˜์ค€์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•œ ํ•„์ˆ˜ ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. AppMaster ์˜ no-code ํ”Œ๋žซํผ์€ CORS ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ์ˆ˜์šฉํ•˜์—ฌ ์›น ๋ณด์•ˆ์˜ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ์ค€์ˆ˜ํ•˜๋Š” ๋ฐฑ์—”๋“œ, ์›น ๋ฐ ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฐฉ์‹์œผ๋กœ AppMaster ๊ฐœ๋ฐœ์ž์™€ ๊ธฐ์—…์ด ์ด์ „๋ณด๋‹ค ๋” ๋น ๋ฅด๊ณ  ๋น„์šฉ ํšจ์œจ์ ์œผ๋กœ ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๊ณ  ์•ˆ์ „ํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.