CORS 문제

문제 상황

현재 설정에 따르면 다른 주소(http://ssafy11front.com - 프론트엔드)에서 다른 서버(http://ssafy11back.com - 백엔드)로 요청을 보내면서 CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있습니다. 브라우저는 보안상의 이유로, 주소나 포트가 다른 서버 간의 요청을 제한하여 CORS 오류를 일으킵니다.

해결 방법

1. 서버에서 CORS 헤더 허용 설정하기
   • 백엔드 서버에서 특정 출처(origin)를 허용하도록 Access-Control-Allow-Origin 헤더를 설정하여 CORS 오류를 해결할 수 있습니다. 모든 출처를 허용하려면 *를 지정할 수 있고, 특정 도메인만 허용하려면 해당 도메인 주소를 명시하면 됩니다.
     
     Access-Control-Allow-Origin: http://ssafy11front.com
   • 필요한 경우 Access-Control-Allow-Methods와 Access-Control-Allow-Headers 등을 설정해 요청 메서드와 허용하는 헤더를 지정할 수 있습니다.
2. 리버스 프록시 사용
   • 리버스 프록시를 통해 CORS 오류를 피할 수 있습니다. 프론트엔드에서 example.com으로 요청을 보내면 실제로는 example.com/api로 전달되도록 설정할 수 있습니다. 이렇게 하면 리버스 프록시가 요청을 다른 도커 컨테이너로 전달하고 응답을 받아와 같은 도메인으로 보이게 되므로, 포트 문제도 발생하지 않습니다.
   • 특히 MSA(Microservices Architecture)로 설계된 환경에서 각 서비스에 라우팅이 필요하기 때문에 Nginx와 같은 리버스 프록시를 사용하면 각 서비스의 접근을 쉽게 관리할 수 있습니다.

리버스 프록시

Nginx를 이용한 리버스 프록시 설정 예시

Nginx를 사용하여 리버스 프록시를 설정할 수 있습니다:

server {
    listen 80;
    server_name https://ssafy11s.com;

    location /api {
        proxy_pass http://backend.ssafy11s.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

 

이 설정으로 example.com/api로 들어오는 요청이 backend.example.com으로 전달됩니다. 동일한 도메인을 통해 요청을 보내기 때문에 CORS 문제가 발생하지 않습니다.

프론트엔드 요청 예시

리버스 프록시가 설정된 상태에서 프론트엔드에서 아래와 같은 방식으로 요청을 보내면 됩니다:

fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ value: inputValue }),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch(error => {
  console.error('Error:', error);
});

이 방식으로 별도의 baseURL 설정 없이도 요청이 원활하게 이루어집니다.