withCredentials 와 크로스 도메인

상황

React.js (프론트엔드) 쪽에서 Express.js (백엔드 API서버) 쪽으로 쿠키값을 요청하는 과정중 Express.js 서버와 Express.js + React.js가 서로 다른 포트(port)위에서 실행되고 있다보니 Cross Domain 에 걸려서 여러가지 셋팅을 해야했다.

 

AXIOS : POST & GET

- axios.post(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<any>>

url : 요청 url

data : 요청 url 로 보낼 값 (body)

config : 요청시 설정 값 (withCredentials 등등..)

 

- axios.get(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<any>>

url : 요청 url

config : 요청시 설정 값 (withCredentials 등등..)

글로벌 axios 기본(defaults) 설정

Config 기본 설정 | Axios 러닝 가이드

해결 : 참고자료

Context

• axios version: v0.18.0, v.0.17.0
• Environment: e.g.: Firefox 52.9.0 Linux, Chrome 67.0.3396.99 Linux

Problem

It looks, that Axios is unable to send cookie in request to another domain. I've two app:

• frontend on local computer, port 8080
• backend on local computer, port 9000

In frontend I've defined backend as: http://127.0.0.1:9000.

In my JavaScript code I have service:

import axios from 'axios'; axios.defaults.withCredentials = true; axios.get('127.0.0.1:9000/api/v1/inventory/system', {withCredentials: true});

When I open my frontend as: http://127.0.0.1:8080 (frontend and backend are in the same domain 127.0.0.1, only port is different), everything is ok, cookie is present in request headers.

But when I open my frontend as http://localhost:8080 cookie is missing in request headers. It's GET request, and there no preflight request, so I would expect, that cookie will be added to request.

I've attached screenshoots

Correct request with cookie (the same domain):

Incorrect request without cookie (cross domain):

 

출처 : github.com/axios/axios/issues/1661

withCredentials in cross domain request dosn't work · Issue #1661 · axios/axios

 

-----------------------------------------------------------------------------------

첫 번째 문제점은 위의 블로그에 정리한 것처럼 포트 번호가 다른 두 서버간의 발생하는 문제점이었고 django 에서 포트 3000번도 허락해줌으로서 해결하였습니다.

이번 포스팅에서는 겪었던 두 번째 문제점에 대해서 정리해보도록 하겠습니다.

 

withCredentials

서버의 자세한 코드까지는 설명하는게 과할거 같아 기본적인 logic만 소개를 하자면, 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는지 확인한 후에 cookie에 token을 발급하게 됩니다.

그 후 다른 페이지에서의 인증도 이 token을 통해 이뤄지게 되죠.

하지만 통신이 아무리 성공적으로 이뤄져 로그인이 성공하더라도 별다른 에러도 없이 인증이 이루어지지 않았습니다.

확인 결과, cookie에 token 값이 정상적으로 들어가지가 않았습니다.

같은 origin의 경우 request header 에 cookie가 추가되는데 orgin이 달라지는 경우 자동으로 추가되지 않아 생기는 문제점이었습니다.

이를 해결하기 위해서는 서버와 클라이언트 둘 다 추가적인 작업이 필요합니다.

 

front

axios 로 통신할 시,withCredentials 설정을 true로 바꿔줘야합니다.

 

const handleLogin = () => { 
	axios.post(`${EndPoint.APIServer}/myauth/login/`, { 
    	profile: { 
        	username: username, 
            password: password } 
        }, { withCredentials: true } )
       	.then(response => { 
        	console.log(response); 
            console.log(response.data); 
            }) 
        }

 

backend

backend에서도 마찬가지로 Credential 설정을 true 로 해줘야합니다.

서버를 어느 것으로 하느냐에 따라 설정하는 방법이 다르겠지만 이번 포스팅에서는 django 서버에서 위의 포스팅에 이어서 설정을 추가하겠습니다.

settings 에 아래 설정을 true로 바꿔주면 됩니다.

# settings.py CORS_ALLOW_CREDENTIALS = True

 

최종적으로 cookie에 token 값이 정상적으로 추가되는 것을 확인할 수 있습니다.

 

출처 : ssungkang.tistory.com/entry/React-axios-%EC%9D%98-withCredentials

[React] axios 의 withCredentials