[React] Cross-Domain Request 시 set-cookie가 되지 않는 이슈 [Same-Site:Strict]

API에 로그인 요청 이후, API에 로그인 세션을 확인하는 요청을 보냈을 때 404를 응답했다. 

 

분명 로그인 요청은 200의 응답과 함께 정상적으로 성공을 했지만, 세션을 받아오지 못하는 이유를 알 수 없었다. 

 

로그인 요청의 Response Header에서 Set-cookie의 same-site 값이 Strict로 설정이 되어있었고, 

서로 다른 도메인으로 요청을 보냈기에 set-cookie가 되지 않았 던 것이다. 

 

이를 해결하기 위해 proxy 설정을 해주었다. 

 

React 프로젝트의 src 디렉토리 안에 setupProxy.js 파일을 만들어 준 뒤 

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

const baseUrl = '요청을 보낼 API서버 URL'

module.exports = function (app) {
  app.use('/api', (req, res, next) => {
    createProxyMiddleware({
      target: baseUrl,
      changeOrigin: true,
      pathRewrite: {
        '^/api/': '/'
      },
      logLevel: 'error',
      cookieDomainRewrite: {
        '*': 'localhost'
      }
    })(req, res, next)
  })
}

아래와 같이 http-proxy-middleware 라이브러리를 사용하여 proxy를 설정해준다. 

 

이후 요청을 /api로 보내면, 

로그인 성공 시 정상적으로 쿠키가 저장되는 것을 확인할 수 있었다.