CORS

์ •์Šน์›ยท2023๋…„ 4์›” 25์ผ
0
post-thumbnail

๐Ÿ“’ ๋ชฉ์ฐจ

  • ๐Ÿ“Œ CORS๋ž€?
  • ๐Ÿ“Œ ์ถœ์ฒ˜๋ž€?
  • ๐Ÿ“Œ CORS ๋™์ž‘ ๋ฐฉ์‹
  • ๐Ÿ“Œ CORS ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

๐Ÿ“Œ CORS๋ž€?

์›น ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๋ณด๋ฉด ์–ธ์  ๊ฐ€ ์•„๋ž˜์™€ ๊ฐ™์€ ์—๋Ÿฌ๋ฅผ ๋ณด๋Š” ๋‚ ์ด ์žˆ๋‹ค.

CORS๋Š” Cross-Origin Resource Sharing์˜ ์•ฝ์ž์ด๋‹ค. ํ•ด๋‹น ๋ฌธ์žฅ์„ ์ง์—ญํ•˜๊ฒŒ ๋˜๋ฉด, "๊ต์ฐจ ์ถœ์ฒ˜ ๋ฆฌ์†Œ์Šค ๊ณต์œ  ์ •์ฑ…"์ด๋ผ ํ•ด์„ํ•  ์ˆ˜ ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ๊ต์ฐจ ์ถœ์ฒ˜๋ž€ ์—‡๊ฐˆ๋ฆฐ ๋‹ค๋ฅธ ์ถœ์ฒ˜๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

๐Ÿ“Œ ์ถœ์ฒ˜๋ž€?

์–ด๋– ํ•œ ์‚ฌ์ดํŠธ๋ฅผ ์ ‘์†ํ•  ๋•Œ, ์šฐ๋ฆฌ๋Š” URL์ด๋ผ๋Š” ๋ฌธ์ž์—ด์„ ํ†ตํ•ด ์ ‘๊ทผํ•˜๊ฒŒ ๋œ๋‹ค.

URL์€ ์•„๋ž˜์™€ ๊ฐ™์€ ๊ตฌ์„ฑ์š”์†Œ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ์ถœ์ฒ˜๋ž€ ํ”„๋กœํ† ์ฝœ, ํ˜ธ์ŠคํŠธ ๊ทธ๋ฆฌ๊ณ  ํฌํŠธ๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

๐Ÿ“Œ CORS ๋™์ž‘ ๋ฐฉ์‹

CORS ์ ‘๊ทผ ์ œ์–ด ์‹œ๋‚˜๋ฆฌ์˜ค์—๋Š” 3 ๊ฐ€์ง€ ๋ฐฉ์‹์ด ์žˆ๋‹ค.

โœ… 1. ํ”„๋ฆฌํ”Œ๋ผ์ดํŠธ ์š”์ฒญ (Preflight Request)


Preflight Request๋Š” ์š”์ฒญ์„ ์˜ˆ๋น„ ์š”์ฒญ๊ณผ ๋ณธ ์š”์ฒญ์œผ๋กœ ๋‚˜๋ˆ„๋Š”๋ฐ, OPTIONS ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์˜ ๋ฆฌ์†Œ์Šค์— ์š”์ฒญ์ด ๊ฐ€๋Šฅํ•œ์ง€ (์‹ค์ œ ์š”์ฒญ์ด ์ „์†กํ•˜๊ธฐ์— ์•ˆ์ „ํ•œ์ง€) ํ™•์ธ ์ž‘์—…์„ ํ•œ ๋’ค, ์š”์ฒญ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด ์‹ค์ œ ์š”์ฒญ์„ ๋ณด๋‚ด๊ฒŒ ๋œ๋‹ค.
Cross-origin ์š”์ฒญ์€ ์œ ์ € ๋ฐ์ดํ„ฐ์— ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— Preflight ์š”์ฒญ์„ ํ•œ๋‹ค.

โœ… 2. ๋‹จ์ˆœ ์š”์ฒญ (Simple Request)


Simple Request๋Š” Preflight Request์™€ ๋‹ค๋ฅด๊ฒŒ ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด์„œ ์ฆ‰์‹œ, cross origin์ธ์ง€ ํ™•์ธํ•œ๋‹ค.
๋˜ํ•œ, ์•„๋ž˜์™€ ๊ฐ™์€ ์กฐ๊ฑด์„ ๋ชจ๋‘ ์ถฉ์กฑํ•ด์•ผํ•œ๋‹ค.

  • ๋ฉ”์„œ๋“œ๋Š” GET POST HEAD ์ค‘ ํ•˜๋‚˜
  • ํ—ค๋”๋Š” Accept, Accept-Language, Content-Language, Content-Type ๋งŒ ํ—ˆ์šฉ
  • Content-Type ํ—ค๋”๋Š” ๋‹ค์Œ์˜ ๊ฐ’๋“ค๋งŒ ํ—ˆ์šฉ
    - application/x-www-form-urlencoded
    - multipart/form-data
    - text/plain

โœ… 3. ์ธ์ฆ์ •๋ณด ํฌํ•จ ์š”์ฒญ (Credential Request)

์ธ์ฆ ๊ด€๋ จ ํ—ค๋”๋ฅผ ํฌํ•จํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์š”์ฒญ์ด๋‹ค.
๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๋น„๋™๊ธฐ ๋ฆฌ์†Œ์Šค ์š”์ฒญ API์ธ XMLHttpRequest ๊ฐ์ฒด๋‚˜ fetch API๋Š” ๋ณ„๋„์˜ ์˜ต์…˜ ์—†์ด ๋ธŒ๋ผ์šฐ์ €์˜ ์ฟ ํ‚ค ์ •๋ณด๋‚˜ ์ธ์ฆ๊ณผ ๊ด€๋ จ๋œ ํ—ค๋”๋ฅผ ๊ธฐ๋ณธ์ ์œผ๋กœ ์š”์ฒญ์— ๋‹ด์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, credentials ์˜ต์…˜์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ ์„œ๋Š” cookie๋ฅผ ์ฃผ๊ณ  ๋ฐ›์„ ์ˆ˜ ์—†๋‹ค.

์˜ต์…˜์€ ์•„๋ž˜์™€ ๊ฐ™์ด ์„ธ ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

  • omit : ์ ˆ๋Œ€๋กœ cookie ๋“ค์„ ์ „์†กํ•˜๊ฑฐ๋‚˜ ๋ฐ›์ง€ ์•Š๋Š”๋‹ค.
  • same-origin : ๋™์ผ ์ถœ์ฒ˜(same origin)์ด๋ผ๋ฉด, user credentials (cookies, basic http auth ๋“ฑ..)์„ ์ „์†กํ•œ๋‹ค. (default ๊ฐ’)
  • include : cross-origin ํ˜ธ์ถœ์ด๋ผ ํ• ์ง€๋ผ๋„ ์–ธ์ œ๋‚˜ user credentials (cookies, basic http auth ๋“ฑ..)์„ ์ „์†กํ•œ๋‹ค.

๐Ÿ“Œ CORS ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

โœ… Access-Control-Allow-Origin ์‘๋‹ต ํ—ค๋” ์„ธํŒ…

์„œ๋ฒ„์ธก ์‘๋‹ต์—์„œ ์ ‘๊ทผ ๊ถŒํ•œ์„ ์ฃผ๋Š” ํ—ค๋”๋ฅผ ์ถ”๊ฐ€ํ•ด์„œ ํ•ด๊ฒฐํ•œ๋‹ค.

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*"); // ๋ชจ๋“  ๋„๋ฉ”์ธ
  res.header("Access-Control-Allow-Origin", "https://example.com"); // ํŠน์ • ๋„๋ฉ”์ธ
});

โœ… cors ๋ชจ๋“ˆ ์‚ฌ์šฉ

cors ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๊ฒฐํ•œ๋‹ค.

const cors = require("cors");
const app = express();

app.use(cors());

โœ… package.json์— proxy๊ฐ’์„ ์„ค์ •

package.json ์— proxy ๊ฐ’์„ ์„ค์ •ํ•˜์—ฌ proxy ๊ธฐ๋Šฅ์„ ํ™œ์„ฑํ™” ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ํ•ด๊ฒฐํ•œ๋‹ค.

{
  //...
  "proxy": "http://localhost:3000"
}

๐Ÿ“Œ ์ฐธ์กฐ

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

https://ingg.dev/cors/

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