[MSA] withCredential

withCredential 이란 서로 다른 origin에서 통신할 때 발생하는 CORS의 일종으로써 쿠키에 관련된 설정입니다.

개발 환경

• Front-end: Vue CLI 3.0
• Back-end : Spring Cloud Gateway

발단

• 토이 프로젝트 진행 중 게이트웨이의 CORS 설정을 모두 허용해줬음에도 브라우저의 쿠키가 자동으로 닮기지 않는 문제 발생하였습니다.

• just-pickup.com:8081 (vue) -> just-pickup:8001 (api-gateway)

• 포트 번호가 다른 url 즉 다른 origin으로의 통신

• 브라우저
  

• 네트워크 패널
  

• 브라우저에서 확인되는 쿠키가 HTTP 통신 시 사라져버립니다.

• 쿠키야 어디로 사라진거니..😂

문제점

• 같은 origin에서 http 통신을 하는 경우 알아서 cookie가 request header에 들어가게 됩니다.
• 하지만 origin이 다를 경우 cookie가 request header에 들어가지 않습니다.

트러블 슈팅

• 클라이언트와 서버에서 withCredential 설정을 통해 해결 가능합니다.

클라이언트 (vue)

axios.defaults.withCredentials = true;

• http 통신 모듈인 axios의 default 값을 true로 변경
• 기본 값으로 설정이 아닌 경우 직접 axios 통신의 두번째 인자인 options에 넣어주면 됩니다.

서버 (api-gateway-service)

spring:
  application:
    name: owner-apigateway-service
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowedOrigins: "http://just-pickup.com:8081"
            allowedMethods:
              - GET
              - POST
            allowedHeaders: '*'
            allow-credentials: true

• allow-credentials: true 로 변경
• 스크린샷
  
  • 쿠키가 전송되는 것을 확인할 수 있습니다.

[주의점] allowOrigins를 ** 로 설정할 경우

• "Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include” 에러가 발생합니다.
  
• allowOrigins를 와일드 카드가 아닌 명시적 url로 설정해줘야합니다.