Mock API 에서 배포된 서버로 API 요청을 보내면 CORS 에러로 요청이 실패하는 현상
Access to XMLHttpRequest at 'https://tweaver.site' from origin
'http://localhost:5173' 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.
문제 해결
Vite의 server.proxy를 사용하면 브라우저의 요청을 프록시 서버로 먼저 보내고, 프록시 서버가 실제 대상 서버에 요청을 전달할 수 있습니다. 이 설정을 통해 프록시 서버가 동일한 도메인에서 요청이 이루어진 것 처럼 보이도록 요청 도메인을 변경하게 되고, CORS를 우회할 수 있습니다.
문제 상황
Mock API 에서 배포된 서버로 API 요청을 보내면 CORS 에러로 요청이 실패하는 현상
문제 해결
Vite의 server.proxy를 사용하면 브라우저의 요청을 프록시 서버로 먼저 보내고, 프록시 서버가 실제 대상 서버에 요청을 전달할 수 있습니다. 이 설정을 통해 프록시 서버가 동일한 도메인에서 요청이 이루어진 것 처럼 보이도록 요청 도메인을 변경하게 되고, CORS를 우회할 수 있습니다.
/https://vitejs.dev/config/
/api 라는 문자열이 target 에 지정한 문자열로 변환되어 사용됩니다.