CORS는 무엇인지, 이를 처리를 해본 경험을 말씀해주세요.

답변

CORS(Cross-Origin Resource Sharing)란 웹 브라우저에서 다른 출처(domain, protocol, port)에서 리소스를 요청할 때 발생하는 보안 정책으로, 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 권한을 제어하는 메커니즘입니다. 이를 통해, 웹 애플리케이션이 악의적으로 다른 도메인의 자원에 접근하지 못하도록 방지할 수 있습니다.

 

추가 정리

CORS란?

• Cross-Origin Resource Sharing의 약자
• 웹 브라우저가 다른 출처(도메인, 프로토콜, 또는 포트)에서 리소스를 요청할 때 발생하는 보안 기능
• 예를 들어 https://example.com에서 호스팅된 웹 페이지가 https://api.example.com와 같은 곳에서 데이터를 요청하려고 할 때 CORS 오류가 발생할 수 있음브라우저가 사용자의 보안을 위해 기본적으로 다른 출처의 리소스를 차단하기 때문

CORS 에러가 발생하는 원인

1. 출처가 다른 도메인 또는 포트로 리소스를 요청할 때

CORS 정책에 따라, 출처가 다른 도메인이나 포트에서 리소스를 요청하는 경우에는 브라우저에서 CORS 에러가 발생한다. 이 경우에는 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하여 요청을 허용해야 한다.

2. HTTPS에서 HTTP로 리소스를 요청할 때

보안상의 이유로 HTTPS에서 HTTP로 리소스를 요청하는 경우에도 CORS 에러가 발생할 수 있다. 이 경우에는 HTTPS로 통신하는 서버에서 HTTP로 요청을 전달하는 것이 아니라, HTTPS로 전달해야 한다.

3. 인증 정보를 포함한 요청을 보낼 때

CORS 정책에 따라, 인증 정보를 포함한 요청을 보낼 때에는 서버에서 Access-Control-Allow-Credentials 헤더를 설정해야 한다. 이 헤더가 설정되어 있지 않으면 브라우저는 인증 정보가 포함된 요청을 거부한다.

4. 허용되지 않은 메서드를 사용할 때

CORS 정책에 따라, 허용되지 않은 메서드를 사용하는 요청을 보내는 경우에는 CORS 에러가 발생한다. 이 경우에는 서버에서 Access-Control-Allow-Methods 헤더를 설정하여 요청을 허용해야 한다.

5. 허용되지 않은 헤더를 사용할 때

CORS 정책에 따라, 허용되지 않은 헤더를 사용하는 요청을 보내는 경우에도 CORS 에러가 발생한다. 이 경우에는 서버에서 Access-Control-Allow-Headers 헤더를 설정하여 요청을 허용해야 한다.

6. 프리플라이트 요청에 대한 응답이 없는 경우

브라우저는 CORS 정책을 준수하기 위해, 프리플라이트 요청을 보내고 서버에서 이에 대한 응답을 받아야 한다. 이 때, 서버에서 응답이 없는 경우에는 CORS 에러가 발생한다. 이 경우에는 서버에서 프리플라이트 요청에 대한 응답을 보내도록 설정해야 한다.

7. 브라우저가 CORS를 지원하지 않는 경우

일부 오래된 브라우저에서는 CORS를 지원하지 않는 경우가 있다. 이 경우에는 서버 측에서 다른 방법을 사용하여 요청을 처리해야 한다.

8. CDN 등에서 제공하는 리소스를 요청할 때

일부 CDN 등에서 제공하는 리소스를 요청할 때에도 CORS 에러가 발생할 수 있다. 이 경우에는 CDN 서비스 제공 업체에서 CORS 설정을 제공하고 있으므로 해당 설정을 확인해야 한다.

9. 브라우저 설정 문제

일부 브라우저에서는 CORS 에러가 발생하는 경우가 있는데, 이는 브라우저 설정에서 발생하는 문제일 수 있다. 이 경우에는 브라우저 설정을 확인하거나, 다른 브라우저를 사용하여 문제를 해결할 수 있다.

CORS 해결법

이게 진짜 CORS인지 판별

• 서버로 접속하려는 URL만 잘못 입력해도 CORS가 발생한다. 잘못된 URL 경로로 접근을 시도해도 CORS가 발생했다. 실제로 /를 1개 더 작성해서 CORS가 발생한 적이 있다.오타를 한 번 더 점검하자..
• 진짜 안되면 걍 서버 코드 싹다 가져와서 실행해보는 것도 방법 CORS에 너무 시간을 뺏길거면 그냥 백엔드 분의 코드를 가져와 localhost로 가져와서 실행해보는 것도 방법이라 생각한다. 그랬는데도 문제가 발생하면 그냥 코드에 문제가 있는거다.그랬는데 만약 문제가 없다면..CORS 문제일 확률이 높다고 생각한다.

CORS 해결법 결론

• 백엔드랑 잘 소통하자
• 원인을 정확히 판별하자( 발생한 CORS인지? 정말 CORS 문제인지?)