CORS, Cookie: React, Spring Boot

1. CORS 브라우저가 접속한 클라이언트의 서버와 서비스를 받는 백엔드 서버가 다를 경우 생기는 문제이다. 그래서 브라우저에서 URL을 붙이면 결과가 나오는데 React로 실행하면 CORS 에러가 뜬다. 가장 대표적인 증상이다.

 

2. CORS 설정이 제대로 되지 않는 이상, Authroization이나 cookie 데이터를 브라우저와 서버가 주고 받을 수 없다. 막힌다.

 

3. Authroization 정보와 cookie 정보를 보내고 싶으면 

  3-1 서버에서 Cross Origin 설정을 해주어야 한다. 

    3-1-1 첫번째로 allowCredentials 를 true로 설정해야 한다.

    3-1-2 두번째로 origin에 허용할 클라이언트 서버 도메인을 입력해야 한다. 여기에 예전처럼 * 하면 브라우저가 막아버리기 때문에  * 하면 안된다.

    3-1-3 쿠키를 허용하고 싶으면 쿠키 설정에서 sameStie를 none, secure를 true해 주어야 한다.

    3-1-4 마지막으로 httpOnly 설정이 있는데, credential 정보 교환과는 상관없다.

      3-1-4-1 이 부분은 보안을 강화하는 의미로 브라우저에서 JavaScript의 쿠키 읽기를 허용할지를 결정한다.

      3-1-4-2 httpOnly가 true면 docuemnt.cookie를 찍어보면 아무것도 찍히지 않는다.

@RestController
@RequestMapping(
    "/api/auth",
    produces = [MediaType.APPLICATION_JSON_VALUE]
)
@CrossOrigin(
    origins = [
        "http://localhost:3000"
    ],
    allowedHeaders = ["*"],
    allowCredentials = "true"
)
class AuthController(
    private val authService: AuthService
) {
    private val log by LoggerDelegator()

    @CrossOrigin
    @PostMapping(value = ["/login", "/signin"])
    fun login(
        @RequestBody @Valid loginQuery: LoginQuery,
        response: HttpServletResponse
    ): ResponseEntity<JwtAuthResponse> {

        log.info("Log in attempt with ${loginQuery.email}")

        val result = authService.login(loginQuery)

        val jwt = ResponseCookie
            .from("jwt", result.accessToken)
            .httpOnly(false)
            .maxAge(120)
            .path("/")
            .sameSite("None")
            .secure(true)
            .build().toString()

        return ResponseEntity
            .ok()
            .header(HttpHeaders.SET_COOKIE, jwt)
            .body(result)

    }

 

  3-2 클라이언트에서는 credential를 사용하여 전송하도록 설정해야 한다.

    3-2-1 ajax 클라이언트는 다양하기 때문에 문서찾아보면 쉽게 나온다. 아래의 경우는 redux slice에서 설정한 내용인데, credentials가 include 되어 있다. axios는 withCredentials를 true로 설정해야 한다.

 

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { BASE_URL } from '../constants'

const baseQuery = fetchBaseQuery({
    baseUrl: BASE_URL,
    credentials: "include"
})

export const apiSlice = createApi({
    baseQuery,
    tagTypes: ['Product', 'Order', 'User'],
    endpoints: (builder) => ({}),
});

 

            const client = axios.create({
                baseURL: server_url,
                headers: {
                    "Content-Type": "application/json",
                },
                withCredentials: true
            })