cors 에러는 무엇인가.

cors는 결국 "백엔드"에서 해결해야 함.

 

 

CORS 오류(Cross-Origin Resource Sharing error)는 브라우저의 보안 기능인 동일 출처 정책(Same-Origin Policy)으로 인해, 다른 출처(origin)의 리소스를 요청할 때 발생하는 차단 현상을 말한다. 

 

이 오류는 웹 애플리케이션에서 다른 도메인, 프로토콜, 포트의 서버로부터 데이터를 가져오려고 할 때 발생하며,

서버에서 Access-Control-Allow-Origin 헤더를 통해 허용된 출처를 명시하거나,

요청을 보내는 클라이언트에서 프록싱하는 등의 방식으로 해결할 수 있다. 

 

CORS 오류의 원인: 동일 출처 정책(SOP)

• 기본 보안 메커니즘:

  웹 브라우저는 악의적인 웹사이트가 다른 웹사이트의 데이터를 무단으로 가져가지 못하도록 동일 출처 정책(SOP)을 따른다. 

   

---

CORS 에러 발생 시 확인 사항

1. 1. 브라우저 개발자 도구 확인:

   오류가 발생한 페이지에서 F12 키를 눌러 개발자 도구를 열고, Console 탭에서 "Cross-Origin Request Blocked"와 같은 CORS 에러 메시지를 확인한다. 

    

   2. 요청한 출처 확인:

브라우저의 네트워크 탭에서 CORS 에러가 발생한 요청을 확인하고, 클라이언트가 요청을 보낸 출처(Origin)와 서버의 출처가 다른지 확인한다.

 

CORS 오류 해결 방법

 

CORS 오류 해결은 서버 측에서 CORS 정책을 설정하거나, 클라이언트 측에서 요청 방식을 변경하는 방식으로 이루어진다.

---

 

서버 측 해결 방법 (권장) >

• Access-Control-Allow-Origin 헤더 설정: 서버의 응답에 Access-Control-Allow-Origin 헤더를 추가하여, 허용할 클라이언트의 출처를 명시적으로 지정한다. 
• 모든 출처 허용: `Access-Control-Allow-Origin: *`와 같이 모든 출처를 허용하는 설정은 간단하게 해결할 수 있지만, 보안상 권장되지 않는다.
• Access-Control-Allow-Methods, Access-Control-Allow-Headers 헤더 설정: 특정 HTTP 메서드(GET, POST 등)나 헤더만 허용해야 하는 경우, 해당 헤더들을 추가로 설정한다.

클라이언트 측 해결 방법 >

프록시 서버 사용: 자신의 서버를 통해 다른 출처의 리소스를 요청하는 프록싱(Proxying) 방식으로 CORS 에러를 우회할 수 있다.

---

(관련 글 모음)

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

---

 

https://www.jeong-min.com/30-cors-fe/#:~:text=CORS%20%EC%A0%95%EC%B1%85%EC%97%90%20%EB%94%B0%EB%9D%BC%2C%20%ED%97%88%EC%9A%A9%EB%90%98%EC%A7%80%20%EC%95%8A%EC%9D%80%20%EB%A9%94%EC%84%9C%EB%93%9C%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94,%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C%20Access%2DControl%2DAllow%2DMethods%20%ED%97%A4%EB%8D%94%EB%A5%BC%20%EC%84%A4%EC%A0%95%ED%95%98%EC%97%AC%20%EC%9A%94%EC%B2%AD%EC%9D%84%20%ED%97%88%EC%9A%A9%ED%95%B4%EC%95%BC%20%ED%95%9C%EB%8B%A4.

개발자 단민 | CORS 에러를 프론트에서 해결? 무시? 아무튼? 해보자!

---