[CORS] CORS란? CORS 에러 해결!

🔎 CORS란?

Cross-Origin Resource Sharing, 즉 교차 출처 리소스 공유 정책으로 엇갈린 다른 출처를 의미한다

 

• 출처(Origin)란? 
  
  • 우리가 어떤 사이트를 접속할 때 인터넷 주소창에 URL을 통해 접근하게 된다. URL은 여러 개의 구성 요소로 이루어져 있는데 출처는 프로토콜과 호스트, 포트까지 모두 합친 URL을 의미한다고 보면 된다
• 동일 출처 정책(Same-Origin Policy)
  • 동일한 출처에 대해서만 리소스를 공유할 수 있다는 정책을 가지고 있다 → 다른 출처 서버에 있는 리소스는 상호작용이 불가능하다 (악의적인 경우를 방지하기 위해)
• 같은 출처와 다른 출처 구분은 어떻게?
  • URL의 구성 요소 중 프로토콜, 호스트, 포트 이 3가지만 동일하다면 동일 출처로 판단!

[참고]
https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

 

 

🔎 오류 해결 방안

우리 프로젝트는 MSA 구조를 갖고 있기 때문에 게이트웨이 서비스의 application.yml 파일에 cors 설정을 추가하였다

 gateway:
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOrigins:
              - "http://localhost:3000"
            allow-credentials: true
            allowedHeaders:
              - x-requested-with
              - authorization
              - content-type
              - credential
              - X-AUTH-TOKEN
              - X-CSRF-TOKEN
            allowedMethods:
              - POST
              - GET
              - PUT
              - PATCH
              - OPTIONS
              - DELETE
            exposed-headers:
              - Authorization

 

📢 allow-credentials를 true로 설정하면 allowedOrigins는 "*"로 설정될 수 없다

 

• allowedHeaders : 클라이언트 측의 CORS 요청에 허용되는 헤더 지정
  • 현재 우리 프로젝트에서는 JWT 토큰을 header에 담아서 클라이언트 측으로 보내고 있다. 따라서 allowedHeaders 설정도 추가해야 403 오류가 안 뜬다
• exposed-headers : 클라이언트가 응답에 접근할 수 있는 헤더 지정
  • 개발자 도구 - 네트워크 탭에 있는 데이터는 정보를 읽을 수만 있다. 클라이언트에서 서버에서 넘어온 데이터에 접근하기 위해서는 exposed-headers 설정을 추가해야 한다.