CORS

CORS (Cross-Origin Resource Sharing) 한 웹 어플리케이션이 다른 출처에 존재하는 자원에 접근하고 싶다면? 접근 권한을 줄 수 있도록 브라우저에 알려주는 체제인 CORS를 이용해야 한다. 예를 들어 한 컴퓨터의 로컬에서 Spring Boot를 8080 포트로 띄우고, React를 3000 포트로 띄웠다고 가정하자. 이 둘은 포트가 다르므로 다른 출처임을 알 수 있다. React가 Spring Boot의 API를 호출하려고 할 때, 출처가 다르므로 접근 권한이 없다며 CORS 에러가 발생한다. 제한된 교차 출처 HTTP 요청 그렇다면 그냥 접근 권한을 서로 열어두면 편하지 않을까?라는 생각이 들 수 있다. 브라우저의 교차 출처 HTTP 요청을 제한하는 건 보안을 위해서다. 서로 ..

✅ 문제 상황 Access to XMLHttpRequest at 'http://localhost:5000/api/hello' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ✅ 오류 원인 서버는 포트가 5000이고 클라이언트는 포트가 3000이기 때문에 발생하는 오류이다. 이렇게 두 개의 다른 포트를 가지고 있는 서버는 아무 설정 없이 Request를 보낼 수 없다. CORS(Cross-Origin Resource Sharing) 정책 때문에 보안을 위해서 막아버린다. ✅ 해결 방법 여러가지 ..