CORS 에러에 대해서.. 상황마다 해결 방법이 다르다!

CORS란

cross-origin-resource-sharing의 약자. 직역해보면 서로 다른 도메인간의 자원을 공유하는것을 의미한다. 브라우저가 CORS에러를 내뿜는것은 서로 도메인이 다른데? 이거 너네 공유 안됨. 이라고 판단하고 에러를 내뱉는 것이다
브라우저는 보안때문에 도메인/포트번호/프로토콜 하나라도 다를경우 다른 교차 출처(cross-origin)이라고 판단을 하고 cross-origin-HTTP 요청을 제한하는것.

 

 

 

 

어떻게 브라우저가 에러를 내뱉는 것일까

CORS는 브라우저에서 보안을 이유로 사용자들을 보호하기 위해 만든 정책이다. 이 정책이 없다면 누구나 요청이 가능해지기 때문에 사이트들을 똑같이 만들어 사용자의 로그인을 유도해 정보를 추출해 갈 수 있다.
이로 인해 CORS 정책을 도입했고 브라우저에서 CORS정책에 위반될시 에러를 내뱉는것.

 

🖥️클라이언트: 나 이거 get으로 http요청할거야 
🌍브라우저: ㅇㅋ 너네 요청이 cors정책에 위반 되는지 서버에 확인해볼게
📱서버: 응,,? 우리 그런거 설정 안해놨는데?
🌍브라우저: 서버에서 cors검증이 안된다는데? 너네 요청 취소할게

 

서버가 CORS정책을 브라우저에게 보내주는 일을 담당하고 있기때문에 서버에서 cross-origin에 대해 동의를 해줘야 한다. 동의를 안해줬을 경우 브라우저는 에러를 내뱉는것이다.

 

 

 

해결방법

1. 백엔드 개발자에게 요청

✔️서버에서 Access-Control-Allow-Origin 헤더를 셋팅을 하는것이 해결방법의 정석 이라고함.

• 해당 API를 백엔드 개발자가 만들었을 경우
• 이제 막 API를 개발해서 서비스를 배포하기 전 이나 테스트 하는 경우
• CORS에러가 개발/프로덕션 환경에서 나는 경우

 

2.  프론트에서 proxy 서버로 해결

프록시란 서버와 클라이언트간의 서버 대리점 역할을 한다. 프록시는 모든 출처를 허용해주기 때문에 프록시를 통해 서버로 요청하는 것이다. 약간 브라우저를 눈속임 하듯이 우회해서 클라이언트에서 요청하는 건데 클라이언트가 프록시를 통해 서버로 요청을 하고 서버는 프록시를 통해 응답을 한다. 그러면 응답된것을 다시 브라우저에게 보내면 cors를 해결할 수 있다. 

• 프로덕션 환경에서는 CORS에러가 나지 않도록 구성되어 있고 개발 환경에서만 CORS를 해결해야하는 경우

또한 직접적으로 proxy 서버를 구축해서 CORS에러를 해결하는 경우도 있다고 한다 (백엔드를 잘안다면...ㅎㅎ)

 

 

 

 

 

🙋🏻‍♀️ 나도 마주친 CORS..

이번에 협업 프로젝트를 진행하며 CORS 에러를 맞이했다. 😅 안녕..^^ 너가 그 유명한 CORS라는 아이구나..ㅎ
일단 우리 프로젝트는 서비스 배포도 안된 상태이고 막 API 개발이 끝난 시점에서 테스트를 해보려는 시점이었기 때문에 백엔드 개발자분에게 CORS에러를 말씀드렸다.
개발 환경에서는 프록시 서버로 CORS를 우회할 수 있다는것을 알고 있었기 때문에 vite.config.ts에서 프록시 서버를 설정해주고 연동 테스트를 해봤다

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    // Proxy 설정
    proxy: {
      '/api': {
        target: '서버 엔드포인트',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
        secure: false,
        ws: true
      }
    }
  }
});

proxy 설정을 해주고 나니 개발환경에서는 CORS에러가 사라졌다.

이 후 백엔드 개발자분이 셋팅을 끝내시고 프록시 서버 없이 API 요청을 했을때 더이상 CORS 에러가 나지 않았다.
해결 방법을 잘 알고있으면 유도리 있게 개발을 진행 할 수 있다는것을 깨닫는 시간이었다!

 

 

참고

https://velog.io/@vraimentres/CORS

CORS 😫

https://velog.io/@hye_rin/Web-%EC%96%B4%EC%A9%8C%EB%8B%A4-%EB%A7%88%EC%A3%BC%EC%B9%9C-CORS%EC%97%90%EB%9F%AC

[Web] 어쩌다 마주친 CORS에러