🚨 발생한 문제
기존 개인 프로젝트에서 구현했던 환불 기능이 CORS 오류로 환불이 이루어지지 않는 문제가 있었다.
배포된 사이트에서 확인해보니 Access-Control-Allow-Origin 헤더를 확인하라는 에러가 있었다.
✔️ 에러 메세지 분석
Access to fetch at
AWS Lambda 주소from origin사이트 배포 주소has been blocked by CORS policy. Response to prelight request doesnt pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. if an opaque response serves your needs. set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
다음 에러 메세지를 해석하면 다음과 같다.
CORS 정책에 의해 환불 요청 API가 차단되었다.
브라우저는 AWS Lambda 주소로 요청을 보내려 하고 있으나, 해당 서버가 CORS 설정을 허용하지 않아 차단된 상태이다.
브라우저는 요청을 보내기 전에 사전 요청(Preflight Request)을 보내 해당 서버가 요청을 허용하는지 확인해야 하는데, 서버가 Access-Contorl-Allow-Origin 헤더를 보내지 않아 브라우저가 요청을 차단한 것이라 한다. 해결 방법으로는 Access-Contorl-Allow-Origin 헤더를 추가해 요청을 허용하도록 설정해야 한다.
요청의 mode를 'no-cors'를 설정하면 브라우저가 CORS 검사를 하지 않지만, 이 경우에는 응답 데이터를 제대로 받을 수 없어 근본적인 해결책이 아니라고 알려준다.
➡️ 즉, 이 문제를 해결하기 위해서는 서버 측에서 CORS 설정을 변경해야 한다.
✔️ 네트워크 탭 확인
💡 문제 해결
AWS 홈페이지에 접속해 API > APIGateWay > Develop > CORS 에서 설정을 수정한다.
- Access-Control-Allow-Origin은 현재 API를 적용할 주소이자 배포한 주소를 넣어주면 된다. 예를 들어,
~vercel.app과 같은 주소를 추가하면 된다. - 이때,
~vercel.app/과 같이 배포한 주소와 다르게 적어주면 제대로 적용이 안되니 꼭 제대로 기입했는지 확인하자! - Access-Control-Allow-Headers에
authorization과content-type을 넣어주니 해결이 되었다.
👉 lambda 함수로 환불 요청을 보낼 때 headers에 "Contnet-Type"과 "Authorization"을 포함시켜 전송하는데 이를 추가하지 않아 발생한 문제였다.
🔗 Reference
AWS 공식문서 - Configure CORS for HTTP APIs in API Gateway
AWS 람다 CORS 오류 해결 참고
