๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Study

[React] CORS ์˜ค๋ฅ˜

by JulesJ 2022. 3. 13.
728x90

CORS ์˜ค๋ฅ˜

 

๊ฐœ๋ฐœํ™˜๊ฒฝ : React + Springboot + Mac

 

React + Springboot ๋กœ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๋”ฐ๋กœ ์„ค์ •์„ ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, 

์ดˆ๊ธฐ์— CORS ์˜ค๋ฅ˜๋ฅผ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋‹ค.

 

์˜ค๋ฅ˜๋ฅผ ๋งŒ๋‚˜๋„ ๋‹นํ™ฉํ•˜์ง€ ๋ง์ž..!

 

์ด๋Ÿฐ์‹์œผ๋กœ ์ฝ˜์†” ์ฐฝ์— ์—๋Ÿฌ๋ฅผ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋‹ค.

Access to XMLHttpRequest at 'http://localhost:8080/v1/login' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

๋‹นํ™ฉํ•˜์ง€ ์•Š๊ณ 

๊ฐ„๋‹จํ•œ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋œ๋‹ค!

 

 

 

package.json์— proxy ์„ค์ •์„ ์ถ”๊ฐ€ํ•œ๋‹ค.

 "proxy": "http://localhost:8080",

 

 

๊ทธ๋ฆฌ๊ณ  ์‚ฌ์šฉํ•  ๋•Œ๋Š”

const USER_URL = "/v1";

์ด๋Ÿฐ์‹์œผ๋กœ http://localhost:8080 ๋ถ€๋ถ„์„ ๋นผ๊ณ  ์ ๊ณ  ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

 

 

์•„ ๊ทธ๋ฆฌ๊ณ  ํ˜น์‹œ ํฌํŠธ๋ฒˆํ˜ธ๋ฅผ ๋‹ค๋ฅธ ๊ฑธ ์‚ฌ์šฉ์ค‘์ด๋ผ๋ฉด http://localhost:5000 ์ด๋Ÿฐ์‹์œผ๋กœ ์ ์–ด๋„ฃ์œผ๋ฉด ๋œ๋‹ค.

 

 

 

 

๋ ๐Ÿง

 

 

 

 

 

 

 

๋Œ“๊ธ€