프론트개발자가 웹페이지 개발을 시작하면, 한번쯤은 맞닥뜨리는 CORS 에러!
이 에러는 이렇게 생겼다...
그러면, CORS에러가 발생하는 이유와 해결방안을 알아보자!
proxy : 다양한 이유로 직접 통신하지 못하는 두 개의 컴퓨터 사이에서 서로 통신할 수 있도록 돕는 역할을 가리켜 프록시라 일컫는다.
// webpack.config.ts
const config: webpack.Configuration = {
...
devServer: {
port: 3090, // 클라이언트 포트 번호
proxy: {
'/api/': { // /api/로 시작하는 url은 아래의 전체 도메인을 추가하고, 옵션을 적용
target: 'http://localhost:3095', // 클라이언트에서 api로 보내는 요청은 주소를 3095로 바꿔서 보내겠다 라는 뜻
changeOrigin: true, // cross origin 허용 설정
},
},
},
...
}
// signUp.ts
// proxy 적용 전 비동기 요청 코드
axios
.post('http://localhost:3095/api/users', {
email,
nickname,
password,
})
// proxy 적용 후 비동기 요청 코드
axios
.post('/api/users', {
email,
nickname,
password,
})
이로써 webpack.config파일에서 CORS 에러를 해결하였다. 🤩
※ 단, 이 방법은 서버와 클라이언트가 로컬호스트를 사용하고 있다는 전제하에 동작된다.