210822 개발기록: CORS 와 http:// (URI scheme, 스킴)

 

❌  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 웹 기본 지식 (김영한)