ABOUT ME

-

Today
-
Total
-
  • ๋‚˜๋ฅผ ๋„ˆ๋ฌด๋‚˜ ํž˜๋“ค๊ฒŒ ํ–ˆ๋˜ CORS ์—๋Ÿฌ ํ•ด๊ฒฐํ•˜๊ธฐ ๐Ÿ˜‚
    Study/Frontend 2021. 4. 21. 18:39
    ๋ฐ˜์‘ํ˜•

     

    ๐Ÿ”ฅ ์‚ฌ๊ฑด์˜ ๋ฐœ๋‹จ : ์™ธ๋ถ€ API ํ˜ธ์ถœ

    ๋•Œ๋Š” ๋ฐ”์•ผํ๋กœ 2020๋…„ 3์›”.

    ํ”„๋ก ํŠธ์—”๋“œ ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ•œ ์ง€ ์–ผ๋งˆ ๋˜์ง€ ์•Š์€ ์ฑ„ ํ™€๋กœ ํ† ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋˜ ์ค‘์ด์—ˆ๋‹ค.

    ์ฝ”๋กœ๋‚˜ ๋ฐ”์ด๋Ÿฌ์Šค ๊ด€๋ จ ์›น์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ ์ž ํ–ˆ๊ณ , React๋กœ ํด๋ผ์ด์–ธํŠธ๋‹จ์„ ๊ฐœ๋ฐœํ•˜๊ณ  Firebase๋กœ ๋ฐฐํฌ๊นŒ์ง€ ์ง„ํ–‰ํ•ด๋ณด๋ ค๊ณ  ํ–ˆ๋‹ค.

    ํ™•์ง„์ž ๋ฐ์ดํ„ฐ๋ฅผ ์ง€๋„์— ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ฝ”๋กœ๋‚˜ ๋ฐ”์ด๋Ÿฌ์Šค ํ™•์ง„์ž ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•ด์ฃผ๋Š” ์™ธ๋ถ€ API๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ–ˆ๋‹ค.

    ๋‹น์‹œ ๋‚ด๊ฐ€ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ–ˆ์„ ๋•Œ๋งŒ ํ•ด๋„ ๊ณต๊ณต ๋ฐ์ดํ„ฐ ํฌํ„ธ์—์„œ ์ œ๊ณตํ•ด์ฃผ๋Š” API๊ฐ€ ์—†์–ด์„œ, 

    Dropper Lab์ด๋ผ๋Š” ๊ณณ์—์„œ ์ œ๊ณตํ•˜๋Š” API๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค.

    (๋‚ด๊ฐ€ ํ”„๋กœ์ ํŠธ๋ฅผ ๋๋‚ผ ์ฆˆ์Œ์— ๊ณต์‹ API๊ฐ€ ์ถœ์‹œ๋˜์—ˆ๋‹ค.)

     

     

    API ๋ฌธ์„œ๋ฅผ ๋ณด๋ฉฐ ์ฐจ๊ทผ์ฐจ๊ทผ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ ํ›„, React ํด๋ผ์ด์–ธํŠธ๋‹จ์—์„œ ์™ธ๋ถ€ API ์„œ๋ฒ„์— ์š”์ฒญ์„ ํ–ˆ๋Š”๋ฐ..? 

     

    ๋‹น์‹œ ์Šคํฌ๋ฆฐ์ƒท์€ ์—†์–ด์„œ ์ž„์‹œ๋กœ ๊ตฌํ˜„ํ•ด๋ณธ CORS ์—๋Ÿฌ ๋ฉ”์„ธ์ง€์ž…๋‹ˆ๋‹ค.

     

    ๋œจ์•„ใ…ใ…ใ…์•… ๐Ÿ˜ฑ๐Ÿ˜ฑ๐Ÿ˜ฑ๐Ÿ˜ฑ

    ์ดˆ๋ณด ๊ฐœ๋ฐœ์ž๋ฅผ ๋‘๋ ค์›€์— ๋–จ๊ฒŒ ๋งŒ๋“œ๋Š” ์ฝ˜์†”์˜ ๋นจ๊ฐ„ ์—๋Ÿฌ ๋ฉ”์‹œ์ง€... ๊ทธ๊ฐ€ ๋“ฑ์žฅํ•˜์˜€๋‹ค...

    (์‚ฌ์‹ค ์—๋Ÿฌ ๋ฉ”์‹œ์ง€๋Š” ๋‚˜๋ฆ„ ์นœ์ ˆํ•˜๊ฒŒ ์—๋Ÿฌ๋ฅผ ์„ค๋ช…ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ํ•œ ๋ฒˆ ๋” ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด๊ฑฐ๋‚˜ ๊ตฌ๊ธ€๋ง๋งŒ ํ•ด๋„ ํ•ด๊ฒฐํ•˜๊ธฐ ์‰ฝ์ง€๋งŒ,)

    ๊ณต๋ถ€ ์‹œ์ž‘ํ•œ ์ง€ ์–ผ๋งˆ ์•ˆ ๋œ ์ดˆ๋ณด ๊ฐœ๋ฐœ์ž๋Š” ๊ทธ์ € ์—๋Ÿฌ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋ฉด ๋‹นํ™ฉ์Šค๋Ÿฝ์ง€...

     

    http://localhost:3000์—์„œ http://openapi.data.xxx ๋กœ ๋ณด๋‚ธ ์š”์ฒญ์ด CORS ์ •์ฑ…์— ์˜ํ•ด์„œ ์ฐจ๋‹จ๋˜์—ˆ๋‹ค๊ณ ????

    Access-Control-Allow-Origin ํ—ค๋”๊ฐ€ ์š”์ฒญ๋œ ๋ฆฌ์†Œ์Šค์— ์—†๋‹ค๊ณ ??

     

    ๊ทธ๋ž˜์„œ ์ด๊ฒŒ ๋Œ€์ฒด ๋ฌด์Šจ ์—๋Ÿฌ๋ƒ๊ณ ?

    ๋ฐ”๋กœ CORS ์ •์ฑ…์„ ์œ„๋ฐ˜ํ•ด์„œ ๋‚˜์˜จ ์—๋Ÿฌ๋ผ๊ณ !

    ๊ทธ๋ ‡๋‹ค๋ฉด CORS ์ •์ฑ…์ด ๋Œ€์ฒด ๋ญ๊ธธ๋ž˜????

     

    โš ๏ธ CORS ๊ด€๋ จ ์ด์Šˆ๋Š” ์™œ ๋ฐœ์ƒํ•˜๋Š” ๊ฑธ๊นŒ?

     

    ์ถœ์ฒ˜ : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

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

     

    ๊ต์ฐจ ์ถœ์ฒ˜ ์š”์ฒญ์˜ ์˜ˆ์‹œ: 

    https://domain-a.com์˜ ํ”„๋ก ํŠธ์—”๋“œ JavaScript ์ฝ”๋“œ๊ฐ€ XMLHttpRequest๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ

    https://domain-b.com/data.json์„ ์š”์ฒญํ•˜๋Š” ๊ฒฝ์šฐ.

     

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

     

    ์œ„ ๋‚ด์šฉ์„ ์š”์•ฝํ•˜์ž๋ฉด,

    - CORS๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ์ถœ์ฒ˜(Origin) ๊ฐ„์— ๋ฆฌ์†Œ์Šค๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹์„ ์ œ์–ดํ•˜๋Š” ์ฒด์ œ์ด๋ฉฐ,

    - CORS ์š”์ฒญ์ด ๊ฐ€๋Šฅํ•˜๋ ค๋ฉด ์„œ๋ฒ„์—์„œ ํŠน์ • ํ—ค๋”์ธ Access-Control-Allow-Origin๊ณผ ํ•จ๊ป˜ ์‘๋‹ตํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

     

    CORS ์ •์ฑ…์„ ์œ„๋ฐ˜ํ•˜์—ฌ ์„œ๋กœ ๋‹ค๋ฅธ ์ถœ์ฒ˜๋ฅผ ๊ฐ€์ง„ ์ƒํƒœ์—์„œ ๋ฌด์–ธ๊ฐ€๋ฅผ ์š”์ฒญํ•˜๊ฒŒ ๋˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ณด์•ˆ ์ƒ์˜ ์ด์œ ๋กœ ์ฐจ๋‹จ์„ ํ•ด๋ฒ„๋ฆฐ๋‹ค!

    ์˜ˆ๋ฅผ ๋“ค์–ด, ํด๋ผ์ด์–ธํŠธ ํฌํŠธ๊ฐ€ 3000๋ฒˆ์ด๊ณ  ์„œ๋ฒ„์˜ ํฌํŠธ๊ฐ€ 8000๋ฒˆ ์ผ ๋•Œ,

    ํด๋ผ์ด์–ธํŠธ์—์„œ ์„œ๋ฒ„๋กœ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ–ˆ์„ ๋•Œ CORS ์—๋Ÿฌ ๋ฉ”์‹œ์ง€๊ฐ€ ํด๋ผ์ด์–ธํŠธ ์ฝ˜์†”์— ๋นจ๊ฐ›๊ฒŒ ๋œจ๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ์ง€ ์•Š๊ฒŒ ๋œ๋‹ค.

     

    CORS ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ๋™์ผํ•œ ์ถœ์ฒ˜์—์„œ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•˜๋ฉด ๋œ๋‹ค.

    ๊ฐ„๋‹จํ•˜์ฅฌ~? ๐Ÿคช

    (๋ถ€๋“ค๋ถ€๋“ค,, ์ด๋ ‡๊ฒŒ ๋๋‚ด๋ฉด ์ •๋ง ์ดˆ๋ณด์ž๋“คํ•œํ…Œ๋Š”,, ๋Œ๋ฉ์ด๋ฅผ ๋งž์„ ๊ฒƒ์ด์•ผ,,,)

     

     

    โ™ป๏ธ CORS ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• 1 ) ๋‚จ์ด ๋งŒ๋“  ํ”„๋ก์‹œ ์„œ๋ฒ„ ์‚ฌ์šฉํ•˜๊ธฐ

    ์ถœ์ฒ˜: https://mobiviki.com

     

    ๋‹น์‹œ ๋‚ด๊ฐ€ ๊ฐœ๋ฐœํ•˜๋˜ ํ™˜๊ฒฝ์˜ ๋ฌธ์ œ์ ์„ ์ •๋ฆฌํ•ด๋ณด์ž๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

    - ์ฒซ ๋ฒˆ์งธ : ํด๋ผ์ด์–ธํŠธ์—์„œ ์™ธ๋ถ€ API ์„œ๋ฒ„๋กœ ๋ฐ”๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด์„œ CORS ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ

    - ๋‘ ๋ฒˆ์งธ : ์™ธ๋ถ€ API๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‚ด๊ฐ€ ์„œ๋ฒ„๋ฅผ ์ œ์–ดํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ
      HTTP ์‘๋‹ต ํ—ค๋”์ธ Access-Control-Allow-Origin ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์—†์Œ

    - ์„ธ ๋ฒˆ์งธ : ๋‹น์‹œ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๋ฐฐ์šด์ง€๋„ ์–ผ๋งˆ ์•ˆ ๋˜์–ด์„œ ๋”ฐ๋กœ ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ์—๋Š” ์‹œ๊ฐ„๊ณผ ์‹ค๋ ฅ์ด ๋ถ€์กฑ

     

    ๋”ฐ๋ผ์„œ ํด๋ผ์ด์–ธํŠธ์—์„œ ์™ธ๋ถ€ ์„œ๋ฒ„๋กœ ๋ฐ”๋กœ ์š”์ฒญ์„ ํ•ด๋ฒ„๋ฆฌ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํ”„๋ก์‹œ ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์šฐํšŒํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํƒํ–ˆ๋‹ค.

    ํ”„๋ก์‹œ ์„œ๋ฒ„๋Š” ํด๋ผ์ด์–ธํŠธ๊ฐ€ ํ”„๋ก์‹œ ์„œ๋ฒ„ ์ž์‹ ์„ ํ†ตํ•ด์„œ ๋‹ค๋ฅธ ๋„คํŠธ์›Œํฌ ์„œ๋น„์Šค์— ๊ฐ„์ ‘์ ์œผ๋กœ ์ ‘์†ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ค€๋‹ค.

    ์‰ฝ๊ฒŒ ๋งํ•ด ๋ธŒ๋ผ์šฐ์ €์™€ ์„œ๋ฒ„ ๊ฐ„์˜ ํ†ต์‹ ์„ ๋„์™€์ฃผ๋Š” ์ค‘๊ณ„์„œ๋ฒ„๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค. 

     

    https://cors-anywhere.herokuapp.com

    ๋‚˜๋Š” ํ”„๋ก์‹œ ์„œ๋ฒ„๋กœ ์œ„ ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.

    ์ด ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ์ค‘๊ฐ„์— ์š”์ฒญ์„ ๊ฐ€๋กœ์ฑ„์„œ HTTP ์‘๋‹ต ํ—ค๋”์—   Access-Control-Allow-Origin : *  ๋ฅผ ์„ค์ •ํ•ด์„œ ์‘๋‹ตํ•ด์ค€๋‹ค.

     

    axios({
      method: "GET",
      url: `https://cors-anywhere.herokuapp.com/https://api.dropper.tech/covid19/status/korea?locale=${city}`,
      headers: {
      'APIKey': COVID_APIKEY,
    },

     

    ์š”์ฒญํ•ด์•ผ ํ•˜๋Š” URL ์•ž์— ํ”„๋ก์‹œ ์„œ๋ฒ„ URL์„ ๋ถ™์—ฌ์„œ ์š”์ฒญํ•˜๊ฒŒ ๋˜๋ฉด,

    ํด๋ผ์ด์–ธํŠธ์—์„œ ์„œ๋ฒ„๋กœ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” CORS ๋ฌธ์ œ๋ฅผ ์•„์ฃผ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

     

     

    โ™ป๏ธ CORS ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• 2 ) ์ง์ ‘ ํ”„๋ก์‹œ ์„œ๋ฒ„ ๊ตฌ์ถ•ํ•˜๊ธฐ

    ์‚ฌ์šฉํ•ด์™”๋˜ ์™ธ๋ถ€ API๊ฐ€ ์„œ๋น„์Šค๋ฅผ ์ค‘๋‹จํ•ด์„œ ๋‚ด ์„œ๋น„์Šค๋„ ๋” ์ด์ƒ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ๋ฐœ๊ฒฌํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

    ๊ทธ๋ž˜์„œ ๋‹ค๋ฅธ API๋กœ ๊ต์ฒดํ•  ๊ฒธ, ์ด์ œ๋Š” ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•ด์„œ CORS ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด๋ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

    ๋‚˜์˜ ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•˜๊ฒŒ ๋˜๋ฉด ๋”์ด์ƒ ํด๋ผ์ด์–ธํŠธ์—์„œ ์„œ๋ฒ„๋กœ ๋ฐ”๋กœ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ์„œ๋ฒ„์—์„œ ์„œ๋ฒ„๋กœ ์š”์ฒญํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

     

    CORS๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๊ด€๋ จ๋œ ์ •์ฑ…์ด๊ธฐ ๋•Œ๋ฌธ์—, ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•˜์ง€ ์•Š๊ณ  ์„œ๋ฒ„ ๊ฐ„ ํ†ต์‹ ์„ ํ•  ๋•Œ๋Š” ์ด ์ •์ฑ…์ด ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค. 

    ์ฆ‰, ์„œ๋ฒ„์—์„œ ์„œ๋ฒ„๋กœ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•˜๋ฉด CORS ์ •์ฑ…์„ ์œ„๋ฐ˜ํ•˜์ง€ ์•Š๊ณ  ์ •์ƒ์ ์œผ๋กœ ์‘๋‹ต์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.

     

    ๊ธฐ์กด์—๋Š” ํด๋ผ์ด์–ธํŠธ๋ฅผ Firebase์— ๋ฐฐํฌํ•ด์„œ ์„œ๋น„์Šคํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ,

    Firebase์˜ Clound Functions๋ฅผ ํ†ตํ•ด์„œ ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ  storage๋ฅผ ์‚ฌ์šฉํ•ด๋ดค๋Š”๋ฐ, ์ƒ๊ฐ๋ณด๋‹ค ๋น„์šฉ์ด ๋งŽ์ด ๋‚˜์™”๋‹ค.

    ๊ทธ๋ž˜์„œ ์ตœ์†Œํ•œ์˜ ๋น„์šฉ์œผ๋กœ ํ† ์ด ํ”„๋กœ์ ํŠธ๋Š” ๋งˆ๋ฌด๋ฆฌํ•˜๊ณ ์ž Firebase ๋Œ€์‹  Heroku๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ˜ธ์ŠคํŒ…๊ณผ ์„œ๋ฒ„๋ฅผ ๋ชจ๋‘ ํ•ด๊ฒฐํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.

     

    ์šฐ์„  React๋ฅผ ํ™œ์šฉํ•œ ํด๋ผ์ด์–ธํŠธ๋‹จ์˜ ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

    import axios from "axios"
    
    /* ์ƒ๋žต */
    
    axios
      .get("/api/covid", {
        params: {
        pageNo: 1,
        numOfRows: 10,
        startCreateDt: yesterdayDate,
        endCreateDt: todayDate,
      },
    })

     

    ๊ทธ๋ฆฌ๊ณ  Express๋ฅผ ํ™œ์šฉํ•œ ์„œ๋ฒ„๋‹จ์˜ ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

    const express = require("express")
    const axios = require("axios")
    const path = require("path")
    const app = express()
    const port = process.env.PORT || 5000
    const http = require("http")
    
    require("dotenv").config()
    
    const covid_url =
    	"http://openapi.data.go.kr/openapi/service/rest/Covid19/getCovid19SidoInfStateJson"
    
    const getCovidData = async (request) => {
    	let response
    	try {
    		response = await axios.get(covid_url, {
    			params: {
    			/* ์ƒ๋žต */
    			},
    		})
    	} catch (e) {
    		console.log(e)
    	}
    	return response
    }
    
    app.get("/api/covid", (req, res) => {
    	getCovidData(req).then((response) => {
    		res.json(response.data.response.body)
    	})
    })
    
    app.use(express.static(path.join(__dirname, "client/build")))
    
    app.get("*", (req, res) => {
    	res.sendFile(path.join(__dirname + "/client/build/index.html"))
    })
    

     

    Heroku์— ์„œ๋ฒ„๋ฅผ ๋ฐฐํฌํ•˜๊ณ  ํ˜ธ์ŠคํŒ…๊นŒ์ง€ ์ง„ํ–‰ํ–ˆ์œผ๋‹ˆ, ํด๋ผ์ด์–ธํŠธ์—์„œ ์„œ๋ฒ„๋กœ ์š”์ฒญํ•  ๋•Œ CORS ๋ฌธ์ œ๋„ ์ผ์–ด๋‚˜์ง€ ์•Š๊ณ ,

    express๋กœ ๊ตฌ์ถ•ํ•œ ์„œ๋ฒ„์—์„œ ์™ธ๋ถ€ API ์„œ๋ฒ„(http://openapi.data.go.kr)๋กœ ์š”์ฒญํ•˜๊ฒŒ ๋˜๋ฏ€๋กœ ์ „ํ˜€ ๋ฌธ์ œ๊ฐ€ ๋˜์ง€ ์•Š๋Š”๋‹ค.

     

    ์ •๋ง ๋งŽ์€ ์‚ฝ์งˆ์„ ๊ฑฐ์น˜๊ณ  ๊ฑฐ์ณ CORS๋ฅผ ๋‹ค์‹œ๊ธˆ ํ•ด๊ฒฐํ•˜๋‹ˆ ๋„ˆ๋ฌด ๊ฐ๊ฒฉ์Šค๋Ÿฌ์› ๋‹ค๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ

    (Firebase๋กœ ์„œ๋ฒ„ ๊ตฌ์ถ•ํ•˜๋Š”๋ฐ ์„œ์นญ ํ•˜๋ฉด์„œ ์‚ฝ์งˆํ•˜๋Š๋ผ 2์ผ ์ •๋„ ์†Œ์š”๋๋Š”๋ฐ, ๋น„์šฉ ๋•Œ๋ฌธ์— ๋‹ค์‹œ Heroku๋กœ ๋Œ์•„์˜จ ๊ฒŒ ํ—ˆ๋ฌดํ•˜๊ธฐ๋„ ํ•˜๊ณ ..)

     

     

    โ™ป๏ธ CORS ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• 3 ) ํด๋ผ์ด์–ธํŠธ : http-proxy-middleware ์‚ฌ์šฉํ•˜๊ธฐ

    ์œ„์— ๊ธฐ์ˆ ํ•œ ๋‘ ๋ฒˆ์งธ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์—์„œ ๋ˆ„๋ฝ๋œ ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋ฐ”๋กœ http-proxy-middleware ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

    ๋ฐฐํฌํ•˜๊ณ  ๋‚˜์„œ๋Š” ๋™์ผํ•œ ์ถœ์ฒ˜์— ์š”์ฒญ์„ ํ•˜๋ฏ€๋กœ CORS ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์ง€๋งŒ, ๋ฐฐํฌํ•˜๊ธฐ ์ „ ๊ฐœ๋ฐœ ๋‹จ๊ณ„๊ฐ€ ๋ฌธ์ œ๋‹ค.

    ๋กœ์ปฌ ํ™˜๊ฒฝ์—์„œ React๋Š” 3000๋ฒˆ ํฌํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  Express๋Š” 5000๋ฒˆ ํฌํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

    ๊ทธ๋Ÿฌ๋ฉด 3000๋ฒˆ ํฌํŠธ์—์„œ 5000๋ฒˆ ํฌํŠธ๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๋‹ˆ๊นŒ ๋‹น์—ฐํžˆ CORS ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋œ๋‹ค.

     

    ์ด๋Š” ๋กœ์ปฌ ํ™˜๊ฒฝ์ผ ๊ฒฝ์šฐ์— ํ•œ์ •ํ•ด์„œ http-proxy-middleware ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ๋‹จ์—์„œ ์‰ฝ๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

     

     

     

     

     

     

     

    CRA๋กœ ๊ฐœ๋ฐœ ์ค‘์ผ ๊ฒฝ์šฐ, http-proxy-middleware ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•˜๊ณ ,

    setupProxy.js ๋ผ๋Š” ํŒŒ์ผ์„ src ํด๋” ๋‚ด์— ๋งŒ๋“ค๊ณ  ์•„๋ž˜์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.

     

    const { createProxyMiddleware } = require("http-proxy-middleware")
    
    module.exports = function (app) {
    	app.use(
    		"/api",
    		createProxyMiddleware({
    			target: "http://localhost:5000",
    			changeOrigin: true,
    		})
    	)
    }
    

     

    ์œ„์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด ๋‘๋ฉด, ๋กœ์ปฌ ํ™˜๊ฒฝ์—์„œ http://localhost:3000/api๋กœ ์‹œ์ž‘๋˜๋Š” ์š”์ฒญ์„

    ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ http://localhost:5000/api ๋กœ ํ”„๋ก์‹ฑ ํ•ด์ฃผ๊ฒŒ ๋œ๋‹ค.

    ๋”ฐ๋ผ์„œ ๋ธŒ๋ผ์šฐ์ €๋Š” ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„์˜ ์ถœ์ฒ˜๊ฐ€ ๋‹ค๋ฅด์ง€๋งŒ ๊ฐ™์€ ๊ฒƒ์œผ๋กœ ๋ฐ›์•„๋“ค์ด๊ฒŒ ๋˜์–ด CORS ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚ค์ง€ ์•Š๋Š”๋‹ค.

     

     

    โ™ป๏ธ CORS ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• 4 ) ์„œ๋ฒ„ : Access-Control-Allow-Origin ํ—ค๋” ์„ธํŒ…ํ•˜๊ธฐ

    ์‚ฌ์‹ค ํด๋ผ์ด์–ธํŠธ์—์„œ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ• ๋ง๊ณ  ์„œ๋ฒ„์—์„œ ํ—ค๋”๋ฅผ ์„ธํŒ…ํ•ด์ฃผ๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ CORS ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด๋‹ค.

    ๋‚˜๋Š” ์ดˆ๊ธฐ์— ์„œ๋ฒ„๋ฅผ ๋”ฐ๋กœ ๊ตฌ์ถ•ํ•˜์ง€ ์•Š๊ณ  ์™ธ๋ถ€ ์„œ๋ฒ„์— ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•ด์„œ ํ—ค๋”๋ฅผ ์„ธํŒ…ํ•  ์ˆ˜ ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ํ”„๋ก์‹œ ์„œ๋ฒ„๋ฅผ ์ผ๋˜ ๊ฒƒ์ธ๋ฐ,

    ๋งŒ์•ฝ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๋ชจ๋‘ ์ž์‹ ์ด ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์„œ๋ฒ„์—์„œ Access-Control-Allow-Origin ํ—ค๋”๋ฅผ ์„ธํŒ…ํ•ด์ฃผ๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ข‹๋‹ค.

     

    const express = require('express');
    const app = express();
    
    app.get('/api', (req, res) => {
        res.header("Access-Control-Allow-Origin", "ํ—ˆ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” ๋„๋ฉ”์ธ");
        res.send(data);
    });
    

     

    ์œ„์™€ ๊ฐ™์ด ์„œ๋ฒ„ ์ชฝ์— ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด ์ฃผ๋ฉด ๋˜๋Š”๋ฐ, Access-Control-Allow-Origin : ์ด๋Ÿฐ ์‹์œผ๋กœ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ๋งŒ์€ ํ”ผํ•˜์ž.

    * ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ชจ๋“  ์ถœ์ฒ˜์—์„œ ์˜ค๋Š” ์š”์ฒญ์„ ํ—ˆ์šฉํ•˜๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ง€์–‘ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๊ณ , ํ—ˆ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” ๋„๋ฉ”์ธ์„ ๊ผญ ์ž‘์„ฑํ•ด์ฃผ์ž.

     

     

    โ™ป๏ธ CORS ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• 5 ) ์„œ๋ฒ„ : CORS ๋ฏธ๋“ค์›จ์–ด ์‚ฌ์šฉํ•˜๊ธฐ 

    ๋‚˜์ฒ˜๋Ÿผ ์„œ๋ฒ„๋ฅผ Express๋กœ ๊ตฌ์ถ•ํ•œ ๊ฒฝ์šฐ Node.js ๋ฏธ๋“ค์›จ์–ด ์ค‘ ํ•˜๋‚˜์ธ CORS ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‰ฝ๊ฒŒ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

     

    const express = require('express');
    const cors = require('cors');
    const app = express();
    
    const corsOptions = {
        origin: 'ํ—ˆ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” ๋„๋ฉ”์ธ', 
    };
    
    app.use(cors(corsOptions));

     

    origin์— ํ—ˆ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” ๋„๋ฉ”์ธ์„ ๋„ฃ์–ด์ฃผ๋ฉด response ํ—ค๋”์— Access-Control-Allow-Origin ๋‚ด์šฉ์ด ์ถ”๊ฐ€๊ฐ€ ๋œ๋‹ค.

    app.use(cors()) ์ด๋Ÿฐ ์‹์œผ๋กœ ํ•˜๊ฒŒ ๋˜๋ฉด ๋ชจ๋“  ์ถœ์ฒ˜์—์„œ ์˜ค๋Š” ์š”์ฒญ์„ ํ—ˆ์šฉํ•˜๋Š” ๊ฒƒ์ด๋ฏ€๋กœ ์ง€์–‘ํ•˜์ž.

     

     

    ๐ŸŒˆ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๊ฒช์–ด์•ผ๋งŒ ํ–ˆ๋˜ ์™ธ๋กœ์šด ์‚ฌํˆฌ๋ฅผ ๋๋งˆ์น˜๋ฉฐ...

    ์›น ๊ฐœ๋ฐœ์ž, ํŠนํžˆ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด CORS ์ด์Šˆ๋Š” ๋ฌด์กฐ๊ฑด ๋„˜์–ด์•ผ๋งŒ ํ•˜๋Š” ํฐ ์‚ฐ์ด๋‹ค.

    ์ดˆ๋ณด ๊ฐœ๋ฐœ์ž์ผ ๋•Œ๋Š” ์ •๋ง ์„œ์นญํ•˜๋ฉฐ ํ•ด๊ฒฐํ•˜๋Š๋ผ ๋ช‡ ๋‚  ๋ฉฐ์น ์„ ๋ณด๋ƒˆ๋Š”๋ฐ,

    ๊ทธ๋ž˜๋„ ๋‚˜๋ฆ„ ์ง€๊ธˆ์€ ๊ณต๋ถ€๋„ ๋งŽ์ด ํ•œ ์ƒํƒœ์—ฌ์„œ, ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•๋งŒ ์ฐพ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ CORS ์ž์ฒด๋ฅผ ์ดํ•ดํ•˜๋Š”๋ฐ ๋งŽ์€ ์‹œ๊ฐ„์„ ๋“ค์˜€๋‹ค.

    ๊ทธ ๊ฒฐ๊ณผ, ์˜ค๋žœ๋งŒ์— ์ด๋ ‡๊ฒŒ ๋ธ”๋กœ๊ทธ๋„ ์ž‘์„ฑํ•ด๋ณด๊ณ , ์›น ๊ฐœ๋ฐœ์ž์—๊ฒŒ๋Š” ๊ธฐ๋ณธ์ธ cross origin ์— ๋Œ€ํ•ด์„œ ํŒŒํ—ค์ณ๋ดค๋˜ ์•„๊น์ง€ ์•Š์€ ์‹œ๊ฐ„์ด์—ˆ๋‹ค.

     

    ์–ด๋–ค ์—๋Ÿฌ ๋ฉ”์„ธ์ง€๋“  ๊ฐ„์—, ๊ทธ ์›์ธ๋งŒ ์ œ๋Œ€๋กœ ํŒŒ์•…ํ•œ๋‹ค๋ฉด ๊ทธ์— ๋งž๋Š” ์˜ฌ๋ฐ”๋ฅธ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ฐพ์•„ ๋‚˜๊ฐˆ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

    ๋‚˜๋ฅผ ๋„ˆ๋ฌด๋‚˜ ํž˜๋“ค๊ฒŒ ํ–ˆ๋˜ CORS ์—๋Ÿฌ๋ฅผ ๊ฒฐ๊ตญ์€ ํ•ด๊ฒฐํ–ˆ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ!

     

     

     

     

     

    - ํ˜น์‹œ๋‚˜ ํฌ์ŠคํŒ…์— ์ž˜๋ชป๋œ ์ ์ด ์žˆ๋‹ค๋ฉด ์ฃผ์ € ๋ง๊ณ  ํ”ผ๋“œ๋ฐฑํ•ด์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

    - ํฌ์ŠคํŒ… ์ž‘์„ฑ์— ์ฐธ๊ณ ํ•œ ๋งํฌ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    ์ฐธ๊ณ  ๋ฌธํ—Œ 1

    ์ฐธ๊ณ  ๋ฌธํ—Œ 2

    ์ฐธ๊ณ  ๋ฌธํ—Œ 3

    ์ฐธ๊ณ  ๋ฌธํ—Œ 4

    ๋ฐ˜์‘ํ˜•

    ๋Œ“๊ธ€ 32

    • ์ฝ”๋ฆฐ์ด 2021.04.24 17:18

      ์ €๋„ ์ง€๊ธˆ ํ•ด๋‹น ๋ฌธ์ œ๋ฅผ ๊ฒช๊ณ  ์žˆ๋Š”๋ฐ ๋„์›€ ๋งŽ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!
      ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค:)

    • seup 2021.07.08 08:44

      ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. CORS ๊ฐœ๋…์„ ์ด๋ฒˆ์— ์•Œ๊ฒŒ๋˜์—ˆ๋Š”๋ฐ ๋‹น์žฅ์—๋Š” ๋ฐ”๋กœ ์ดํ•ด ์•ˆ๊ฐ€์ง€๋งŒ ๋„ˆ๋ฌด ์ž˜ ์ •๋ฆฌ๋˜์–ด์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    • ํ†ตํ‚ค 2021.07.26 11:26

      ์ •๋ฆฌ ๋„ˆ๋ฌด ๊น”๋”ํ•ฉ๋‹ˆ๋‹ค...

    • ใ…Žใ…Ž 2021.07.27 21:38

      ๋ธŒ๋ผ์šฐ์ € ๋‹จ์— ์˜ต์…˜ ์ ์šฉํ•ด๋„ ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. :)
      https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome

    • Vintz 2021.08.25 20:33 ์‹ ๊ณ 

      ์ตœ๊ณ ์˜ ์„ค๋ช…์ด์—์š”..๐Ÿ‘ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

    • ํ™๊ธธ๋™ 2021.10.14 15:05

      5๋ฒˆ ๋ฐฉ๋ฒ•์œผ๋กœ ํ•ด๋ณผ๋ ค๊ณ ํ•˜๋Š”๋ฐ ์ž˜์•ˆ๋˜๋„ค์š” ใ… ใ… ใ… .. 5๋ฒˆ๊ณผ ๊ฐ™์ด ๋งŒ๋“ ๋’ค, express heroku์— ๋ฐฐํฌํ•˜๊ณ 
      heroku ๋ฐฐํฌ๋œ url ๊ฐ€์ง€๊ณ ,
      1๋ฒˆ ๋ฐฉ๋ฒ•์ฒ˜๋Ÿผ api ์•ž์— ๋ถ™์ด๋ฉด ๋œ๋‹ค๋Š”๊ฑธ๊นŒ์š” ?ใ… ใ… 

      • xiubin 2021.10.23 23:13 ์‹ ๊ณ 

        ์•ˆ๋…•ํ•˜์„ธ์š” ๋‹ต๋ณ€์ด ๋Šฆ์–ด ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค :( 1๋ฒˆ ๋ฐฉ๋ฒ•์€ ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•˜์ง€ ์•Š๊ณ  ํด๋ผ์ด์–ธํŠธ์—์„œ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด๋ฉฐ 5๋ฒˆ๊ณผ๋Š” ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค.
        5๋ฒˆ์ฒ˜๋Ÿผ ์„œ๋ฒ„๋ฅผ ์ง์ ‘ ๊ตฌ์ถ•ํ•ด์„œ ๋ฐฐํฌํ•˜์—ฌ CORS๋ฅผ ์ œ์–ดํ•˜๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด 2๋ฒˆ๋ฐฉ๋ฒ•๊ณผ 5๋ฒˆ๋ฐฉ๋ฒ•์„ ํ•จ๊ป˜ ์ง„ํ–‰ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค!

    • ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. 2021.10.14 23:58

      ์ง€๊ธˆ๊นŒ์ง€ ๋ดค๋˜ ์„ค๋ช… ์ค‘ ์ตœ๊ณ ์˜ ์„ค๋ช…์ด๋„ค์š”!! ๐Ÿ‘
      ๋ถ๋งˆํฌ์— ์ €์žฅํ•ด๋‘๊ณ  ์•ž์œผ๋กœ๋„ ๋ณด๋Ÿฌ ์˜ค๊ฒ ์Šต๋‹ˆ๋‹ค!!

      ๋‹ค๋งŒ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• 5์— "credentials์„ true๋กœ ์„ค์ •ํ•˜๋ฉด response ํ—ค๋”์— ์ถ”๊ฐ€๊ฐ€ ๋œ๋‹ค."
      ์ด ๋ถ€๋ถ„์ด ์ž˜ ์ดํ•ด๊ฐ€ ๊ฐ€์ง€ ์•Š์•„์„œ ์งˆ๋ฌธ์„ ๋“œ๋ฆฌ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค!

      ์ €๋Š” credentials ์˜ต์…˜์€ access-control-allow-credentials ํ—ค๋”์™€ ๊ด€๋ จ์ด ์žˆ๊ณ ,
      cookie ๋˜๋Š” authorization header์™€ ๊ฐ™์€ ์ธ์ฆ ์ •๋ณด ๋˜ํ•œ ํ—ˆ์šฉํ•  ๋•Œ ์“ฐ์ธ๋‹ค๊ณ  ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค!

      ์ž‘์„ฑ์ž๋‹˜๊ป˜์„œ๋Š” ์ด ์˜ต์…˜์„ true๋กœ ์„ค์ •ํ•ด์•ผ response ํ—ค๋”์— ์ถ”๊ฐ€๊ฐ€ ๋œ๋‹ค๊ณ  ์ž‘์„ฑํ•˜์…”์„œ ์ œ๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” ์ง€์‹์ด ์ž˜๋ชป๋œ ๊ฒƒ์ธ๊ฐ€ ํ•ด์„œ ์งˆ๋ฌธ ๋“œ๋ ค๋ด…๋‹ˆ๋‹ค!

      • xiubin 2021.10.23 23:02 ์‹ ๊ณ 

        ์•ˆ๋…•ํ•˜์„ธ์š” ์†Œ์ค‘ํ•œ ํ”ผ๋“œ๋ฐฑ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค:)
        ๋Œ“๊ธ€ ์ž‘์„ฑ์ž๋‹˜๊ป˜์„œ ์ •ํ™•ํžˆ ๋ง์”€ํ•ด์ฃผ์…จ์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ๋ฌธ์žฅ์„ ํ—ท๊ฐˆ๋ฆฌ๊ฒŒ ์ด์–ด์„œ ์ž‘์„ฑํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. credentials ๋Š” ์˜ต์…˜์ผ ๋ฟ์ด๊ณ , ํ•„์ˆ˜๋กœ ์ž‘์„ฑํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค.
        ์ •ํ™•ํ•œ ๊ฒƒ์€ ํŒจํ‚ค์ง€ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค!
        https://www.npmjs.com/package/cors

    • mvmvm 2021.10.15 21:24 ์‹ ๊ณ 

      ๊ธ€ ์ž˜๋ดค์Šต๋‹ˆ๋‹ค :) ๊ถ๊ธˆํ•œ๊ฒŒ ํ•˜๋‚˜ ์žˆ๋Š”๋ฐ
      2๋ฒˆ ๋ฐฉ๋ฒ•์˜ ๊ฒฝ์šฐ heroku์— ํ˜ธ์ŠคํŒ…ํ•œ ์„œ๋ฒ„๊ฐ€ csr ๋ฐฉ์‹์œผ๋กœ ํ•˜๊ฒŒ๋” index.html์ด๋ž‘ axios ์š”์ฒญํ•˜๋Š” ๋ฆฌ์•กํŠธ ์ฝ”๋“œ(2๋ฒˆ์— ์˜ˆ์‹œ์— ์žˆ๋Š” ์งง์€ ์ฝ”๋“œ)๋„ ํ•จ๊ป˜ ์ „๋‹ฌํ•˜๋Š”๊ฑด๊ฐ€์š”?

      • xiubin 2021.10.23 23:29 ์‹ ๊ณ 

        ์•ˆ๋…•ํ•˜์„ธ์š” ์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค:)
        ์ œ๊ฐ€ ์งˆ๋ฌธ์„ ์ž˜ ์ดํ•ดํ•œ๊ฑด์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ๋‹ต๋ณ€์„ ๋“œ๋ฆฌ์ž๋ฉด, ์ €๋Š” React๋กœ ํด๋ผ์ด์–ธํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ณ  CSR ๋ฐฉ์‹์œผ๋กœ ๋ Œ๋”๋ง์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.
        ๋”ฐ๋ผ์„œ ์„œ๋ฒ„์—์„œ๋Š” index.html๊ณผ ์—ฌ๋Ÿฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒˆ๋“ค ํŒŒ์ผ์„ ๋ฐ›์•„์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด ๋•Œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง์„ ์ง„ํ–‰ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ ๊ทธ ๋•Œ axios ๊ด€๋ จ ์ฝ”๋“œ๊ฐ€ ํ•จ๊ป˜ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.

    • 0715yk 2021.10.23 15:07

      ๊ธ€ ์ •๋ง ์ž˜๋ดค์Šต๋‹ˆ๋‹ค:)
      ๋„์›€๋ฐ›๊ณ  ๊ฐ‘๋‹ˆ๋‹ค!

    • ์ต๋ช… 2021.10.31 01:28

      ๋น„๋ฐ€๋Œ“๊ธ€์ž…๋‹ˆ๋‹ค

    • ๊ธ€ ์ž˜ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค!
      ๊ถ๊ธˆํ•œ์ ์ด ์žˆ์–ด์„œ ํ•˜๋‚˜ ์—ฌ์ญค๋ด…๋‹ˆ๋‹ค
      3๋ฒˆ์งธ ๋ฐฉ๋ฒ•์—์„œ "๋ฐฐํฌํ•˜๊ณ  ๋‚˜์„œ๋Š” ๋™์ผํ•œ ์ถœ์ฒ˜์— ์š”์ฒญ์„ ํ•˜๋ฏ€๋กœ CORS ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์ง€๋งŒ" ์ด๋ผ๊ณ  ์ ํ˜€์žˆ๋Š”๋ฐ ๋ฐฐํฌํ•ด๋„ ๋ฆฌ์•กํŠธ๋Š” 3000๋ฒˆ ํฌํŠธ, ๋…ธ๋“œ๋Š” 5000๋ฒˆ ํฌํŠธ๋กœ ๊ตฌ๋™๋˜์–ด์„œ ๋™์ผํ•œ ์ถœ์ฒ˜๊ฐ€ ์•„๋‹Œ ๊ฒƒ ๊ฐ™๋‹จ ์ƒ๊ฐ์ด ๋“ค์–ด์„œ์š”.
      ํ˜น์‹œ ์ œ๊ฐ€ ์ž˜๋ชป ์ƒ๊ฐํ•˜๊ณ  ์žˆ๋Š”๊ฑธ๊นŒ์š”?

      • xiubin 2021.11.22 12:46 ์‹ ๊ณ 

        ์•ˆ๋…•ํ•˜์„ธ์š”, ๊ผผ๊ผผํžˆ ์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!
        ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ๋Š” React์™€ Express๊ฐ€ ๊ฐ๊ฐ ๋‹ค๋ฅธ ์„œ๋ฒ„์—์„œ ๊ตฌ๋™๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ฐฐํฌํ•˜๊ธฐ ์œ„ํ•ด React ํ”„๋กœ์ ํŠธ๋ฅผ ๋นŒ๋“œํ•˜๋ฉด ์„œ๋ฒ„๊ฐ€ ์ œ์™ธ๋œ ๋ฒˆ๋“ค ํŒŒ์ผ์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์ฆ‰, CRA๋ฅผ ํ™œ์šฉํ•œ ๊ฐœ๋ฐœํ™˜๊ฒฝ์—์„œ๋Š” ์„œ๋ฒ„๊ฐ€ 3000๋ฒˆ ํฌํŠธ์— ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋˜์ง€๋งŒ build ์ดํ›„์—๋Š” ์„œ๋ฒ„๊ฐ€ ์ œ์™ธ๋˜๊ธฐ ๋•Œ๋ฌธ์— React ์„œ๋ฒ„๊ฐ€ ์—†์–ด์ง„๋‹ค๊ณ  ๋ณด๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ Heroku๋‚˜ AWS์— ๋ฐฐํฌํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” React์˜ ๋นŒ๋“œ ํŒŒ์ผ์„ Express ๋‹จ์ผ ์„œ๋ฒ„์—์„œ ๋„์›Œ์ฃผ๊ฒŒ ๋˜๋ฏ€๋กœ ๋™์ผํ•œ ์ถœ์ฒ˜์— ์š”์ฒญ์„ ํ•œ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    • CORS๋ณ‘ ์™„์น˜ 2021.11.30 13:16

      CORS ๋•Œ๋ฌธ์— ์šฐ์šธ์ฆ ๊ฑธ๋ ธ๋‹ค๊ฐ€ ์ด ๊ธ€์„ ์ฝ๊ณ  ์™„์น˜๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๊ฐ€ ๋ญ”์ง€ ์ดํ•ด๋„ ๋˜์—ˆ๊ณ  ์‹ค์งˆ์ ์œผ๋กœ ํ•ด๊ฒฐ๊นŒ์ง€ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค๐Ÿ˜Š

    • ์ตœ๊ณ  2021.12.31 01:55

      ์ตœ๊ณ ์ด์‹ญ๋‹ˆ๋‹ค!!!!!!!!!!!!!!!!!!!!

    • ์–ด์ œ๋ถ€ํ„ฐ ๊ณจ๋จธ๋ฆฌ ์ฉ์ด๊ณ  ์žˆ์—ˆ๋Š”๋ฐ xiubin๋‹˜์ด ์•Œ๋ ค์ฃผ์‹  ์ฒซ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์œผ๋กœ CORS ์—๋Ÿฌ๋Š” ํ•ด๊ฒฐํ–ˆ๋Š”์Šต๋‹ˆ๋‹ค. :)
      ๊ทธ๋Ÿฐ๋ฐ ๊ทธ ๋‹ค์Œ์—” 403 error๋ฅผ ๋„์šฐ๋„ค์š” ใ… ใ… ใ…œ
      ์Šคํƒ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ์— ์งˆ๋ฌธํ•ด๋ณด๋‹ˆ ํ•˜๋‚˜์˜ URL์— ๋‘๊ฐœ์˜ http๊ฐ€ ๋“ค์–ด๊ฐˆ ์ˆœ ์—†๋‹ค๊ณ  ํ•˜๋Š”๋ฐ ์–ด๋–ป๊ฒŒ ๋œ๊ฑธ๊นŒ์š”??ใ… 

      • xiubin 2022.03.03 17:25 ์‹ ๊ณ 

        ์•ˆ๋…•ํ•˜์„ธ์š”~ ๋‹ต๋ณ€์„ ๋„ˆ๋ฌด ๋Šฆ๊ฒŒ ๋‹ฌ์•„๋“œ๋ฆฐ ๊ฒƒ ๊ฐ™์•„ ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค :( ์šฐ์„  403 ์—๋Ÿฌ๋Š” ๊ถŒํ•œ ๋ฌธ์ œ์ผ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์Šต๋‹ˆ๋‹ค. api ์š”์ฒญ ๊ถŒํ•œ์ด ์žˆ๋Š”์ง€ ์šฐ์„  ํ™•์ธํ•ด์ฃผ์‹œ๊ณ  ์‹คํ–‰ํ•˜์‹  ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•ด์ฃผ์‹œ๋ฉด ์–ด๋–ค๊ฒŒ ๋ฌธ์ œ์ธ์ง€ ์ •ํ™•ํžˆ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋„ค์š”!

      • heroku ์„œ๋ฒ„์— ๋Œ€ํ•œ ์ž„์‹œ ์ ‘๊ทผ ๊ถŒํ•œ์„ ์ฃผ๋Š” ์ฃผ์†Œ์—์„œ ๊ถŒํ•œ์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.
        ์—ญ์‹œ ๊ถŒํ•œ ๋ฌธ์ œ๊ฐ€ ๋งž์•˜๋„ค์š” ใ…Žใ…Ž
        ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

    • franco 2022.03.07 00:53

      ์ •๋ง ํฐ ๋„์›€๋์–ด์š” ใ… ใ…  ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!!

    • univ-erse 2022.09.27 10:20 ์‹ ๊ณ 

      ์ตœ๊ทผ์— ๋ฐ”๋€Œ๋ฉด์„œ cors-anywhere ๋Š” ์—„์ฒญ ๋Š๋ฆฌ๋”๋ผ๊ตฌ์š” ์ €๋Š” https://cors.sh ๋กœ ๊ฐˆ์•„ํƒ”์–ด์š”.