쿠키가 발급되지 않을 때, Access-Control-Allow-Origin 오류 해결 방법

쿠키가 발급되지 않을 때

KOS 프로젝트는 프론트엔드에 React.js를 사용하고 서버는 go lang 라이브러리 gin을 이용하여 진행중이다. 처음에 api를 만들고 나서는 postman이라는 툴로 제대로 동작하는지 검사한다. 처음에는 api연결이 순조롭게 되다가 로그인을 위해서 쿠키를 발급하는 api를 작성한 이후에 문제가 발생했다.

 

쿠키가 발급되지 않는다.

프론트엔드에서 받은 Network도 200으로 정상이고 set-cookie되는 것까지 보이며 response를 출력해보아도 정상이다. 그렇다면 왜 쿠키가 발급되지 않을까?

백엔드에서 프론트엔드에 쿠키를 저장시키기 위해서는 양쪽의 credential 속성을 모두 ON 해주어야하기 때문이다.

먼저 백엔드(go lang)의 코드는 다음과 같다.

 

// router

import {
    "github.com/gin-gonic/gin"
    "github.com/gin-contrib/cors"
}

r := gin.Default()

config := cors.DefaultConfig()
config.AllowOrigins = []string{"http://localhost:3000", "http://127.0.0.1:3000"} // origin 허용
config.AllowCredentials = true // credential 허용

r.Use(cors.New(config))

// Controller
c.SetCookie("access-token", signed, 60*60, "/", "", false, true)

router 단에서 config로 허용하는 origin에 프론트엔드의 origin을 추가해준다. 또한 AllowCredential도 true로 변경하여 허용해준다.

여기서 AllowOrigins를 *(와일드카드)로 처리하면 안되는데 이유는 [주의할 점](#주의할 점)에 기재되어있다.

 

Controller에서 쿠키를 발급하는 코드는 *gin.Context 객체인 c의 SetCookie를 이용하였다.

 

func (c *Context) SetCookie(name, value string, maxAge int, path, domain string, secure, httpOnly bool)

출처 : https://pkg.go.dev/github.com/gin-gonic/gin

httpOnly 속성은 true로 해주어야 유저가 쿠키를 직접 수정할 수 없다.

 

그래도 쿠키가 발급되지 않는 이유는 프론트엔드 단에서도 credential을 ON해주어야하기 때문이다.

 

const login = () => {
        // 로그인
    axios.post('http://localhost:8080/v1/user-api/login', {
        ID: 'heejin',
        Password: '1234'
    }, { withCredentials: true }) // withCredential 옵션 ON
        .then((res) => {
        // 토큰 발급됨
        console.dir(res);
        window.location.href = `${window.origin}/home`; // home으로 redirect
    })
        .catch((e) => {
        console.dir(e);
    });
};

axios에서 제공하는 withCredentials 옵션을 true로 설정하니, 백엔드 코드에서 setCookie를 정상적으로 실행할 수 있게 되었고 토큰이 정상적으로 저장되었다.

axios 사이트를 보면 기본 값으로 withCredentials 속성이 false로 되어있음을 확인할 수 있다. 따라서 직접 true로 변경해주어야 한다.

 

// `withCredentials`는 자격 증명(credentials)을 사용하여
// 크로스 사이트 접근 제어(cross-site Access-Control) 요청이 필요한 경우 설정합니다.
withCredentials: false, // 기본 값

이는 MDN Web Docs사이트를 참조해보면 XMLHttpRequest 객체의 withCredentials 기능을 그대로 이용한 것으로 볼 수 있다. 이 기능은 boolean 값으로 세팅되어 cookie와 tls 인증서와 같은 인증 요소를 서버에서 설정할 수 있는지를 결정한다.

 

결론적으로, 프론트엔드 코드의 credential 옵션과 서버의 credential 옵션을 모두 ON 해주면 쿠키를 setting 할 수 있다. 

 

주의할 점

그럼에도 다음과 같은 오류가 브라우저에 뜨는 경우가 있다.

XMLHttpRequest cannot load http://localhost:8080/v1/user-api/login. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

해석해보면 서버에서 credential을 true로 할 거면, 받는 allow-origin을 와일드카드인 *로 세팅하지 말고 직접 세팅하라는 것이다. 생각해보면 당연한 얘기이다. AllowOrigins가 *로 세팅되어있으면 서버에 credential을 true로 하여 요청한 모든 사이트의 credential의 정보를 서버가 맘대로 바꿀 수 있기 때문이다.

config.AllowOrigins = []string{"http://localhost:3000", "http://127.0.0.1:3000"} // origin 허용

따라서 위의 코드와 같이 origin도 제한해주면 제대로 동작한다.

---

위에서 계속 언급된 same site, cross-site에 대해서 궁금하다면 다음 포스팅을 참조!

SOP, CORS

axios나 fetch, XMLhttpRequest에 대해 궁금하다면 다음 포스팅을 참조!

Ajax 기술