[TIL] CORS 에러

백엔드와의 협업

주특기 미니 프로젝트가 시작 되었다.
백엔드와 처음하는 협업으로 나는 로그인, 회원가입 페이지를 맡았다.

CORS(Cross Origin Resource Sharing) 에러

로그인 회원가입 페이지 구현을 끝내고 서버에게서 받은 주소를 연결하여 회원가입, 로그인을 하면 network 에러가 났다.
그러면서 CORS에러도 같이 났는데 찾아보니 클라이언트에서 서버로 api요청을 보낼 때 흔히 볼 수 있는 에러중 하나였다.

1. http로 들어오는 것과 https로 들어오는 것은 다른 origin으로 취급된다.
2. http는 기본 포트가 80이고 https의 기본 포트는 443인데 이는 생략할 수 있기 때문에 이 포트가 달려 있는 거랑 달려 있지 않는 건 같은 origin으로 볼 수 있다.
3. protocal, hostname,port만 완전히 똑같으면 뒤에 pathname 등의 정보는 달라도 같은 origin으로 취급한다.

• SOP(Same Origin Policy)

  동일 출처 정책(same-origin policy):
  어떤 Origin 에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줍니다.

즉, SOP는 다른 origin으로 부터 요청 받는 리소스를 접근제한하는 보안 정책이라고 할 수 있다.

나는 localhost:3000으로 개발 중이고 서버에서는 배포한 퍼블릭 IP주소를 주셨다.
이럴 경우 다른 origin으로 취급되어 sop를 위반하게 되는데 이런 상황을 CORS 에러라고 한다.

• CORS 에러

  교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

해결방법은 여러가지가 있었다. 클라이언트쪽에서도 해결할 수 있고 서버쪽에서도 해결할 수 있었다.

해결방법
프론트엔드 - proxy server 도임

• 클라이언트 말단에 프록시 서버를 도입하여 /api, /api2로 보내지는 요청의 origin을 api의 서버의 origin과 동일하게 만들 수 있다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3000',
      changeOrigin: true,
    })
  );
};

• 서버
  • CorsFilter 만들어서 filter에서 처리해준다.
  • CrossOrigin 어노테이션 사용하기
    우리 서버작업을 하신 분은 @CrossOrigin 을 사용하는 방법으로 해결했다고 한다.
    이 어노테이션은 controller 클래스 단에서 설정할 수도 있고 메서드 단에서 설정할 수도 있다고 한다.

@RestController
@CrossOrigin(origins = "http://localhost:3000")
@RequiredArgsConstructor
@RequestMapping("/api/users")
public class UserController {
....
}