Access to XMLHttpRequest at ~~ from origin ~~ has been blocked by CORS policy:
개발자라면 백,프 가릴것 없이 이 CORS에러를 겪어 봤을 것이다.
프론트라면 백앤드 개발자에게 '이거 해결해주세요~'라고 하면 착한 백앤드 개발자라면 해결해주겠지만 어지간하면 '이새끼 뭐지...?'라고 생각할 것이다.
프론트가 스스로 해결할 수 있는 문제이기 때문이지...
첫 번째 방법으로는, 프론트앤드 코드에서 proxy서버를 설정 해주는 방법이다.
예시 코드를 보자면
// in config file
proxy: {
'/api/': {
target: 'http://백엔드주소',
changeOrigin: true,
},
}이렇게 설정해주면 되는데, 저 코드가 무슨말인고 하면 프론트에서 api로 보내는 요청은 적어놓은 백앤드 주소로 보내겠다! 대충 그런 뜻이다. 그래서 api로 시작하는 요청은 백엔드주소에서 보내는 것처럼 취급을 하겠다 말이다.
그러면 config파일에서 저렇게 설정해줬으니까 작업하는 파일의 코드에서 axios(혹은 fetch).post('http://구질구질') 이게 아니라 axios.post('/api/어떤것') 이렇게 해주면 읽기도 편하고 깔꼼해진다.
!! Tip을 하나 적어보자면 로컬환경에서 작업하고 있는 상황에서 위와같이 config를 수정한다면 수정하고 나서 재시작 한번 해주는게 좋다. 그렇지 않으면 요청은 가겠지만 403이 뜰 확률이 상당히 높다. 이걸 모른다면 '어 씨... 처음 집어넣는 데이터인데 왜 중복값이 뜨는거지???' 이러면서 스턴걸리면서 개발이 하기 싫어지기 시작하는데... 이거 속 상함 좀 오래간다.. 꼭 기억하자
