콘솔창을 열었을 때, 분명 🟢 200 (OK) 가 뜨는데도 불구하고 에러가 나서 데이터를 가져오지 못하고 있었습니다.
에러의 내용대로 'Access-Control-Allow-Origin'와 CORS에 관련하여 검색을 해보았습니다.
CORS
웹사이트의 주소 비교해서 같지않으면,
한 웹페이지가 다른 도메인을 가진 웹페이지의 데이터 교환을 허용할 수 있게끔해주는 보안입니다.
서버에서 특정 헤더인 'Access-Control-Allow-Origin' 관련 옵션이 주어져있지않다면 ,
다른 도메인과의 데이터 교환이 불가능합니다.
Access-Control-Allow-Origin
Access-Control-Allow-Origin 응답 헤더는 이 응답이 주어진 "origin"으로부터의 요청 코드와 공유될 수 있는지를 나타냅니다.
`*`
credential이 없는 요청들에 와일드카드로써 문자 값 "*"이 명시될 수 있습니다.
이 값은 브라우저에 리소스에 접근하는 임의의 origin으로부터의 요청 코드를 허용함을 알립니다.
와일드카드를 credential과 함께 사용하려고 하면 오류가 발생합니다.
콘솔창을 열어 확인해 본 결과 Access-Control-Allow-Origin에 *이 있으니,
withCredential과 함께 사용하면 안된다는 것을 알아냈습니다.
여기서,
Access-Control-Allow-Origin은 나에 대해서 밝히는 것!
OpenApi에서 이를 * 로 설정한 이유는 특정할 수 없는 모든 사이트에서 통신을 해야하기 때문입니다.
그래서 쿠키와 HTTP 인증 정보를 서버로 전송하는 방식을 제어하는 옵션 중 하나인 withCredentail 옵션을 제거했는데,
이는 CORS에러에 대해선 자유로워질수 있지만 쿠키나, 리프레시 토큰을 받을 수 없습니다.
-> 다른 아키텍쳐 고민해봐야함
해결 방법
백엔드에서 cors에러 나지않도록 허용하기 ⭐️best!
프록시 서버 만들기 -> 서버
HTTP 프록시 미들웨어만들기 -> 서버
CORS Filter사용 -> 클라이언트
일단은 OpenApi에서는 리프레시 토큰을 받아올 일이 없으니 widthCredentials를 사용하지않고,
데이터를 가져온 후 문제가 있다면, 명시된 해결방법들을 통해 에러해결을 하면 좋을 거 같습니다!
개요
https://www.foodsafetykorea.go.kr/api/openApiInfo.do?menu_grp=MENU_GRP31&menu_no=661&show_cnt=10&start_idx=1&svc_no=COOKRCP01
위의 조리식품 레시피DB의 데이터를 호출하는 과정에서 CORS에러가 발생하였습니다
내용
콘솔창을 열었을 때, 분명 🟢 200 (OK) 가 뜨는데도 불구하고 에러가 나서 데이터를 가져오지 못하고 있었습니다. 에러의 내용대로 'Access-Control-Allow-Origin'와 CORS에 관련하여 검색을 해보았습니다.
CORS
Access-Control-Allow-Origin
콘솔창을 열어 확인해 본 결과 Access-Control-Allow-Origin에
*이 있으니, withCredential과 함께 사용하면 안된다는 것을 알아냈습니다.여기서,
Access-Control-Allow-Origin은 나에 대해서 밝히는 것!
OpenApi에서 이를 * 로 설정한 이유는 특정할 수 없는 모든 사이트에서 통신을 해야하기 때문입니다.
그래서 쿠키와 HTTP 인증 정보를 서버로 전송하는 방식을 제어하는 옵션 중 하나인 withCredentail 옵션을 제거했는데, 이는 CORS에러에 대해선 자유로워질수 있지만 쿠키나, 리프레시 토큰을 받을 수 없습니다. -> 다른 아키텍쳐 고민해봐야함
해결 방법
일단은 OpenApi에서는 리프레시 토큰을 받아올 일이 없으니 widthCredentials를 사용하지않고, 데이터를 가져온 후 문제가 있다면, 명시된 해결방법들을 통해 에러해결을 하면 좋을 거 같습니다!
참고 문서
https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Access-Control-Allow-Origin https://bohyeon-n.github.io/deploy/web/cors.html https://xiubindev.tistory.com/115