210822 ๊ฐœ๋ฐœ๊ธฐ๋ก: CORS ์™€ http:// (URI scheme, ์Šคํ‚ด)

2021. 8. 23. 08:12ใ†๐Ÿ“” TIL

 

โŒ  cors ์ด์Šˆ

front ๋‹จ์—์„œ axios ๋กœ api ๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ CORS ์ด์Šˆ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. back ๋‹จ(nestjs) ์—์„œ app.enableCors() ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ฃผ์—ˆ์Œ์—๋„ cors ๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ ์˜์•„ํ–ˆ๋Š”๋ฐ, ์ด์œ ๋Š” front ์—์„œ ํ˜ธ์ถœ์‹œ url์˜ ๋ฌธ์ œ์˜€๋‹ค.

// wrong way
await axios.post("localhost:4000/hospital/postAnswers", {
	...
})


// right way
await axios.post("http://localhost:4000/hospital/postAnswers", {
	...
})

url ์— http:// ๋ฅผ ๋ถ™์—ฌ์ฃผ๋ƒ ์•„๋‹ˆ๋ƒ์˜ ์ฐจ์ด์ž„์„ ์•Œ๊ฒŒ ๋๋‹ค. 

 

โœ…  ์›์ธ

์•„๋ž˜ ๊ทธ๋ฆผ์„ ์ฐธ๊ณ ํ•˜๋ฉด, http ๋Š” scheme ์˜ ํ•ด๋‹น๋˜๋Š” ์˜์—ญ์œผ๋กœ ํ”„๋กœํ† ์ฝœ์„ ๋œปํ•œ๋‹ค.

์ฆ‰ ์˜ฌ๋ฐ”๋ฅธ ํ”„๋กœํ† ์ฝœ์„ ๋ช…์‹œํ•˜์ง€ ์•Š๊ณ  localhost ๋งŒ ํ˜ธ์ถœํ•˜์˜€๊ธฐ์— cors issue๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒƒ์ด์—ˆ๋‹ค.

์›น์€ ์ด๋Ÿฐ ํ”„๋กœํ† ์ฝœ(์ผ๋ฐ˜์ ์œผ๋กœ http, ๋ณด์•ˆ์ด ํ•„์š”ํ•˜๋ฉด https)์„ ๋ฐ˜๋“œ์‹œ ํ•„์š”๋กœ ํ•œ๋‹ค. 

์ถœ์ฒ˜:  ๋ชจ๋“  ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ HTTP ์›น ๊ธฐ๋ณธ ์ง€์‹ (๊น€์˜ํ•œ)