์ผ๋‹จ ํ•˜๊ณ  ๋ณด๋Š” ์‚ฌ๋žŒ

๋‚˜์ค‘๋ณด๋‹จ ์ง€๊ธˆ์— ์ง‘์ค‘ํ•˜๋˜, ์ง€๊ธˆ๋ณด๋‹จ ๋‚˜์ค‘์— ์™„๋ฒฝํ•ด์ง€์ž๐Ÿ’ช๐Ÿป

๐Ÿ—ž๏ธ IT ๋™ํ–ฅ ํŒŒ์•… ๋ฐ ๋‚˜์˜ ์ƒ๊ฐ ์ •๋ฆฌ

[CORS] GET vs Optional Methods (POST, PUT, OPTIONS)

JanginTech 2024. 8. 27. 10:43

1. Setting Up CORS and Integration on AWS API Gateway Using CloudFormation

https://dzone.com/articles/setting-up-cors-and-integration-on-aws-api-gateway

 

Setting Up CORS and Integration on AWS API Gateway - DZone

Learn about the significance of CORS, authorization including bearer tokens, and the advantages of selecting optional methods in place of standard GET requests.

dzone.com

 

 

 

[ ์š”์•ฝ ]

CORS์˜ ์ค‘์š”์„ฑ

  • ์—ฌ๋Ÿฌ ๋„๋ฉ”์ธ์—์„œ ์•ก์„ธ์Šค๊ฐ€ ํ•„์š”ํ•  ๋•Œ API ๊ฐœ๋ฐœ์— ๋งค์šฐ ์ค‘์š”ํ•˜๋‹ค(CORS๋Š” ๋ฌด๋‹จ ์•ก์„ธ์Šค๋ฅผ ๋ง‰๋Š”๋ฐ ํ•„์ˆ˜์ )
  • API์™€ ์ƒํ˜ธ ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํŠน์ • ๋„๋ฉ”์ธ์„ ๊ตฌ๋ถ„ํ•จ์œผ๋กœ์จ ์œ ํšจํ•œ cross-origin ์š”์ฒญ๋งŒ ํ—ˆ์šฉํ•˜์—ฌ CSRF ๊ณต๊ฒฉ์œผ๋กœ๋ถ€ํ„ฐ ๋ณดํ˜ธํ•  ์ˆ˜ ์žˆ๋‹ค
  • ๋ณด์•ˆ(Security): ๋„๋ฉ”์ธ ์•ก์„ธ์Šค๋ฅผ ๊ทœ์ œํ•˜์—ฌ ์œ ํ•ดํ•œ cross-origin ์š”์ฒญ์œผ๋กœ๋ถ€ํ„ฐ API๋ฅผ ๋ณดํ˜ธ
  • ์œ ์—ฐ์„ฑ(Flexibility): ํŠน์ • ๋„๋ฉ”์ธ์— ๋Œ€ํ•ด ๋‹ค์–‘ํ•œ ์•ก์„ธ์Šค ์ˆ˜์ค€(GET, POST, DELETE)์„ ํ™œ์„ฑํ™”
  • ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(User experience): ์˜ค๋ฅ˜ ๋ฐœ์ƒ ์—†์ด ๋„๋ฉ”์ธ ์ „์ฒด์˜ ๋ฆฌ์†Œ์Šค์— ์›ํ™œํ•˜๊ฒŒ ์•ก์„ธ์Šค ํ•  ์ˆ˜ ์žˆ๋‹ค

 

GET vs Optional Methods(POST, PUT, OPTIONS)

CORS ์„ค์ •์„ ์œ„ํ•ด GET ๋Œ€์‹  Optional Methods๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ํ•„์š”์„ฑ์„ ์ดํ•ดํ•ด์•ผ ํ•œ๋‹ค!

์ด์œ  GET OPTIONAL METHODS (POST, PUT, OPTIONS)
๋ณด์•ˆ (Security) GET ์š”์ฒญ์€ URL์— ํ‘œ์‹œ๋˜์–ด ์บ์‹œ๋  ์ˆ˜ ์žˆ์Œ
→ ๋ฏผ๊ฐํ•œ ์ •๋ณด์˜ ๊ฒฝ์šฐ ๋ณด์•ˆ์„ฑ์ด ๋‚ฎ์Œ
POST/PUT์€ URL์— ํ‘œ์‹œ๋˜์ง€ ์•Š์•„ ์บ์‹œ๋˜์ง€ ์•Š์Œ
→ ๋ฏผ๊ฐํ•œ ๋ฐ์ดํ„ฐ์˜ ๋ณด์•ˆ์„ ๊ฐ•ํ™”ํ•  ์ˆ˜ ์žˆ์Œ
์œ ์—ฐ์„ฑ (Flexibility) URL์„ ํ†ตํ•œ ๋ฐ์ดํ„ฐ ์ „์†ก์ด ์ œํ•œ๋˜์–ด, ์ „์†กํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ์˜ ๋ณต์žก์„ฑ์˜ ํฌ๊ธฐ๊ฐ€ ์ œํ•œ ๋จ
→ ๋‹จ์ˆœํ•œ ๋ฐ์ดํ„ฐ๋งŒ ์ „์†ก ๊ฐ€๋Šฅ
request body์— ๋ณต์žกํ•œ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋ฅผ ์ „์†กํ•  ์ˆ˜ ์žˆ์Œ
์œ ์—ฐ์„ฑ์ด ๋” ๋†’์Œ
๋ฉฑ๋“ฑ์„ฑ๊ณผ ์•ˆ์ „์„ฑ
(Idempotency and Safety)
๋ฉฑ๋“ฑ์ ์ด๊ณ  ์•ˆ์ „ํ•˜๋‹ค
→ ๋ฆฌ์†Œ์Šค์˜ ์ƒํƒœ๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š์Œ
POST/PUT์€ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ ์ž‘์—…์— ์‚ฌ์šฉ๋˜๊ณ ,
OPTIONS๋Š” OPTIONAL METHODS๋ฅผ ํ™•์ธํ•˜๋Š”๋ฐ ์‚ฌ์šฉ ๋จ
CORS Preflight GET ์š”์ฒญ์€ ์ผ๋ฐ˜์ ์œผ๋กœ CORS ์‚ฌ์ „ ๊ฒ€์‚ฌ์— ์‚ฌ์šฉ๋˜์ง€ ์•Š์Œ OPTIONS ์š”์ฒญ์€ CORS ์‚ฌ์ „ ๊ฒ€์‚ฌ์— ํ•„์ˆ˜์ ์ด๋ฉฐ, ์‹ค์ œ ์š”์ฒญ์ด ์ˆ˜ํ–‰๋  ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ํ™•์ธ

 

*๋ฉฑ๋“ฑ์„ฑ: ์ดˆ๊ธฐ ์ ์šฉ ์ดํ›„ ๊ฒฐ๊ณผ๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ , ์—ฌ๋Ÿฌ ๋ฒˆ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ํŠน์ • ์ž‘์—…์˜ ์†์„ฑ(HTTP methods: GET, PUT)

* Preflight : OPTIONS ์š”์ฒญ์— ๋Œ€ํ•œ ์‘๋‹ต. ์ ์ ˆํ•œ CORS ํ—ค๋”๋ฅผ ์ „์†กํ•˜์—ฌ ์„œ๋ฒ„๊ฐ€ ๋„๋ฉ”์ธ์˜ ์›๋ณธ ๊ฐ„ ์š”์ฒญ์„ ๋ช…์‹œ์ ์œผ๋กœ ํ—ˆ์šฉํ•˜๋Š”์ง€ ํ™•์ธ

 

 

์š”์•ฝ

1. CORS๋ฅผ ์„ค์ •ํ•˜๊ณ , CloudFormation์„ ํ†ตํ•ด AWS API Gateway๋ฅผ ํ†ตํ•ฉํ•˜๋ฉด API ์•ก์„ธ์Šค๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค

2. ํ—ˆ์šฉ๋œ ์ถœ์ฒ˜์˜ ์š”์ฒญ๋งŒ ์•ก์„ธ์Šคํ•จ์œผ๋กœ์จ API๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค

3. CORS๋ฅผ ์ดํ•ดํ•˜๊ณ  ๊ตฌํ˜„ํ•˜๋ฉด ๋„๋ฉ”์ธ ๊ฐ„ ํ™˜๊ฒฝ์—์„œ ์•ˆ์ „ํ•˜๊ณ  ํšจ์œจ์ ์ธ ์ƒํ˜ธ ์ž‘์šฉ์„ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ๋‹ค

 

GET๊ณผ OPTIONAL METHODS

1. ๋ณด์•ˆ: GET์€ URL์— ๋ฐ์ดํ„ฐ๋ฅผ ๋…ธ์ถœํ•˜์ง€๋งŒ, POST/PUT์€ body์— ์ „์†กํ•˜์—ฌ ์บ์‹œ ๋˜์ง€ ์•Š์Œ

2. GET์€ ์ „์†ก ๋ฐ์ดํ„ฐ ํฌ๊ธฐ๊ฐ€ ์ œํ•œ์ ์ด์ง€๋งŒ, POST/PUT์€ ๋ณต์žกํ•œ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•จ

3. GET(PUT)์€ ๋ฉฑ๋“ฑ์„ฑ์ด์ง€๋งŒ, POST๋Š” ๊ทธ๋ ‡์ง€ ์•Š์Œ (POST๋Š” ๋ฆฌ์†Œ์Šค๋ฅผ ์ƒ์„ฑํ•˜๊ณ  PUT์€ ๋ฆฌ์†Œ์Šค๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋ฉฐ ํ•ด๋‹น ๋™์ž‘์€ ๋ฉฑ๋“ฑ์„ฑ ๋ฐ ์‘๋‹ต ์ฒ˜๋ฆฌ ์ธก๋ฉด์—์„œ ๋‹ค์–‘์„ฑ์„ ๋ค๋‹ค)

4. GET์€ ํ”„๋ฆฌํ”Œ๋ผ์ดํŠธ๋ฅผ ํŠธ๋ฆฌ๊ฑฐํ•˜์ง€ ์•Š์ง€๋งŒ, OPTIONS๋Š” CORS ํ™•์ธ์— ํ•„์ˆ˜์ 

 

 

โž•

CORS(Cross-Origin Resource Sharing)?

  • ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‚ฌ์šฉํ•˜๋Š” ํ•„์ˆ˜์ ์ธ ๋ณด์•ˆ ๋ฉ”์ปค๋‹ˆ์ฆ˜
  • ๋„๋ฉ”์ธ, ํ”„๋กœํ† ์ฝœ ๋˜๋Š” ํฌํŠธ๊ฐ€ ๋‹ค๋ฅธ ๊ณณ์—์„œ ์„œ๋ฒ„ ๋ฆฌ์†Œ์Šค์— ๋Œ€ํ•œ ๊ทœ์ œ๋œ ์•ก์„ธ์Šค๋ฅผ ํ—ˆ์šฉํ•จ
  • API ์˜์—ญ์—์„œ, ํŠนํžˆ AWS API Gateway์—์„œ CORS ๊ตฌ์„ฑ์€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ ์•ก์„ธ์Šค๋ฅผ ์šฉ์ดํ•˜๊ฒŒ ํ•˜๊ณ , ์ž ์žฌ์  ๋ณด์•ˆ ์œ„ํ—˜์„ ์™„ํ™”ํ•˜๋Š” ๋ฐ ๋งค์šฐ ์ค‘์š”ํ•˜๋‹ค

 

 

 

 

 


 

๐Ÿค” ์ด์— ๋Œ€ํ•œ ๋‚˜์˜ ์ƒ๊ฐ

CloudFormation์„ ์‚ฌ์šฉํ•˜์—ฌ API Gateway ๊ตฌ์„ฑ์„ ๊ด€๋ฆฌํ•˜๋ฉด ์ผ๊ด€์„ฑ ๋ณด์žฅ ๋ฐ ๋ฐ˜๋ณต์„ฑ์„ ์ค„์ผ ์ˆ˜ ์žˆ์–ด, ์ˆ˜๋™ ์˜ค๋ฅ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์Œ์„ ๋ฐฐ์› ๋‹ค. ๋˜, ๋ณด์•ˆ์„ ์œ„ํ•ด์„œ๋Š” CORS๋ฅผ ํ•„์ˆ˜์ ์œผ๋กœ ๊ณ ๋ คํ•˜๋Š” ๊ฒƒ์ด ์ ์ ˆํ•˜๋‹ค.

 

๋ฌด๋‹จ ์•ก์„ธ์Šค๋กœ๋ถ€ํ„ฐ API๋ฅผ ๋ณดํ˜ธํ•˜๊ณ , ๋ฏผ๊ฐํ•œ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ GET๊ณผ POST/PUT์˜ ์ฐจ์ด์ ์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ค‘์š”ํ•œ ์ง€์‹์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

๊ทธ๋ ‡๋‹ค๊ณ  ๋ฌด์กฐ๊ฑด OPTIONAL METHODS๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”๊ฐ€? ๊ทธ๊ฑด ๋˜ ์•„๋‹ˆ๋ผ๊ณ  ๋ณธ๋‹ค. ๋งค์ผ ๋А๋ผ๋Š” ๊ฑฐ์ง€๋งŒ, ๋ณด์•ˆ๊ณผ ๊ฐœ๋ฐœ์˜ ๊ด€์ ์€ ๋๊ณผ ๋์ธ ๊ฒƒ ๊ฐ™๋‹ค.

 

๋ฐ์ดํ„ฐ์˜ ์„ฑ๊ฒฉ๊ณผ ์ˆ˜ํ–‰๋˜๋Š” ์ž‘์—…์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋” ์ ํ•ฉํ•œ ๋ฐฉ๋ฒ•์„ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ด ๋ณด์ธ๋‹ค.