CORS(Cross Origin Resoruce Sharing)

cors๋ฅผ ์•Œ์•„๋ณด์ž


๐Ÿง CORS๋ž€?

ํ•œ ๋„๋ฉ”์ธ์—์„œ ๋กœ๋“œ๋˜์–ด ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์— ์žˆ๋Š” ๋ฆฌ์†Œ์Šค์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ํด๋ผ์ด์–ธํŠธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ ๋ฐฉ๋ฒ•์„ ์ •์˜ํ•œ๋‹ค.

๐Ÿ‘ถ ํƒ„์ƒ๋ฐฐ๊ฒฝ

์ตœ์‹  ์›น๋ธŒ๋ผ์šฐ์ €๋“ค์ด ๋ณด์•ˆ์ด์Šˆ๋กœ Same Origin Policy ์ •์ฑ…์œผ๋กœ ํ•ด๋‹น์„œ๋ฒ„์ด์™ธ ์™ธ๋ถ€ Host๊ฐ€ ์ ‘์†ํ•˜๋Š” ๊ฒƒ์„ ์ฐจ๋‹จํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. (๋™์ผ ๋„๋ฉ”์ธ๋‚ด์—์„œ๋งŒ ์„œ๋ฒ„ ์š”์ฒญ์„ ํ—ˆ์šฉ, ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์˜ ์„œ๋ฒ„์š”์ฒญ์„ ๋ถˆํ—ˆ) ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•˜์—ฌ CORS๊ฐ€ ๊ณ ์•ˆ๋˜์—ˆ๋‹ค.

๐Ÿ“ƒ CORS์˜ ์ข…๋ฅ˜

์ข…๋ฅ˜๋Š” 4๊ฐ€์ง€๋กœ ๋‚˜๋‰œ๋‹ค.

  • Simple Request
  • Preflight Request
  • Credential Request
  • Non-Credentail Request

Simple Request

  • GET, HEAD, POST ์ค‘ ํ•œ ๊ฐ€์ง€ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•ด์•ผํ•จ
  • POST์ผ ๊ฒฝ์šฐ Context-type์ด ์…‹์ค‘ ํ•˜๋‚˜๋ฅผ ๋งŒ์กฑํ•ด์•ผ ํ•œ๋‹ค.
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
  • Custom Header๋ฅผ ์ „์†กํ•˜์ง€ ์•Š์•„์•ผ ํ•จ

Preflight Request

Preflight Request๋Š” ๋จผ์ € Preflight ์š”์ฒญ์„ ๋ณด๋‚ด์„œ ์„œ๋ฒ„๊ฐ€ ์‘๋‹ต์„ ํ•˜๋Š”์ง€ ํ™•์ธ ํ•œ๋‹ค.

  • GET, POST, HEAD ์™ธ์˜ ๋‹ค๋ฅธ ๋ฐฉ์‹์œผ๋กœ๋„ ์š”์ฒญ์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋‹ค.
  • application/xml ์ฒ˜๋Ÿผ ๋‹ค๋ฅธ Content-type์œผ๋กœ ์š”์ฒญ์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋‹ค.
  • ์ปค์Šคํ…œ ํ—ค๋”๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

Preflight Request๋Š” ์˜ˆ๋น„ ์š”์ฒญ๊ณผ ๋ณธ ์š”์ฒญ์œผ๋กœ ๋‚˜๋‰˜์–ด ์ „์†กํ•œ๋‹ค.

Credential Request

HTTP Cookie์™€ HTTP Authentication ์ •๋ณด๋ฅผ ์ธ์‹ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์š”์ฒญ

์š”์ฒญ ์‹œ xhr.withCredentials = true ๋ฅผ ์ง€์ •ํ•ด์„œ Credential ์š”์ฒญ์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๊ณ ,

์„œ๋ฒ„๋Š” Response Header์— ๋ฐ˜๋“œ์‹œ Access-Control-Allow-Credentaials: true๋ฅผ ํฌํ•จํ•ด์•ผ ํ•˜๊ณ , Access-Control-Allow-Origin ํ—ค๋”์˜ ๊ฐ’์—๋Š” \*๊ฐ€ ์˜ค๋ฉด ์•ˆ๋˜๊ณ  http://foo.examp ๊ฐ™์€ ๊ตฌ์ฒด์  ๋„๋ฉ”์ธ์ด ์™€์•ผํ•œ๋‹ค.

Non-Credentail Request

CORS ์š”์ฒญ์€ ๊ธฐ๋ณธ์ ์œผ๋กœ Non-Credential ์š”์ฒญ์ด๋ฏ€๋กœ , xhr.withCredentials = true ๋ฅผ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด Non-Credential ์š”์ฒญ์ด ๋œ๋‹ค.

Thanks to

์ฐธ๊ณ  : ๊น€๋งŒ์ˆ˜์˜ ๋ธ”๋กœ๊ทธ - CORS(Cross Origin Resource Sharing, ํฌ๋กœ์Šค ๋„๋ฉ”์ธ) ์ด์Šˆ

์ฐธ๊ณ  : ์ฝ”๋ฆฐ์ด์˜ ์„ฑ์žฅ๊ณผ์ • - CORS (Cross-Origin Resource Sharing)


ยฉ 2019. All rights reserved.