[ 문제 해결 ]Set-cookie 가 있는데 브라우저 application 탭에 쿠키가 만들어지지 않을 때 (https 사용 없이 http로만 하는 방법)

[ 문제 ]

서버에서 refreshToken이 담긴 cookie를 만들고 응답헤더에도 Set-Cookie가 있음에도 실제 쿠키가 만들어지지 않는 문제가 발생했다.

[ 원인 ]

front 서버는 localhost:5173

back 서버는 localshot:8080  

 

브라우저는 페이지를 제공하는 서버를 기준으로 Origin을 판단한다.

브라우저는 localhost:5173 서버에서 리소스를 받았으므로, 해당 리소스의 Origin은 localhost:5173이다. 그런데 api 요청시 bacck 서버의 Origin은 localhost:8080이다. 즉 Origin이 다르므로 CORS 가 발생한다.

이 문제는 백엔드 서버에서 CORS 헤더를 보내도록 설정하므로 해결 할 수 있다.

 

전역 설정도 할 수 있지만 나는 간단하게 다음과 같이 controller에 설정하였다.

@RestController
@Slf4j
@RequestMapping("/users")
@CrossOrigin(origins = "http://localhost:5173", allowCredentials = "true")
@RequiredArgsConstructor
public class UserController

 

 

CORS 문제가 해결되어 console 창에 에러 로그가 사라졌지만, 서버로부터 응답 받은 헤더에 set-cookie가 있음에도 cookie가 생성되지 않았다.

원인은 SameSite=None + Secure 조건이 만족되지 않았기 때문에 브라우저는 쿠키를 생성하지 않았던 것이다.

해당 조건이 만족하고 브라우저가 쿠키를 생성하기 위해서는 http가 아닌 https로 통신을 해야한다.

[ 해결 ]

하지만 나는 로컬에서만 테스트 중이였으므로 https로 전환은 따로 할 필요성이 없어 http로도 쿠키가 생성시키는 방법을 모색했다.

 

방법을 찾던 중 vite.config.js 설정을 바꿔서 localhost:5173을 프록시 서버로 사용하는 방법을 채택했다.

localhost:5173 프록시 서버로 사용했기에 브라우저는 프록시 서버와 통신한다.

프록시 서버는 브라우저가 보낸 요청들을 localhost:8080인 서버와 통신을 한다.

브라우저는 프록시 서버와만 통신하기 때문에 CORS 자체가 발생하지 않는다. 

 

vite.config.js 설정 변경 

export default defineConfig({

  plugins: [vue()],

  server: {

    port: 5173,

    proxy: {

      '/api': {

        target: 'http://localhost:8080',

        changeOrigin: true,

        secure: false,

        rewrite: (path) => path.replace(/^\/api/, '')

      }

    }

  }

})

 

프록시 서버를 쓰는 것으로 대체하였으므로

@CrossOrigin(origins = "http://localhost:5173", allowCredentials = "true") 코드는 삭제해도 무방하다.

 

해당 설정으로 바꾼 후 브라우저 application 탭에 쿠키가 생성되어 refreshToken이 있는 것을 확인하였다.