XMLHttpRequest로 Cross Domain Cookie값 읽어오기

사연

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

1. header값에 Access-Control-Allow-Credentials를 true로 ...

Access-Control-Allow-Origin도 * 기호가 아닌 도메인(http://localhost:3000)을 명시해 주어야 한다고 한다.

app.all('/*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'POST, PUT, GET, DELETE');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
  res.header('Access-Control-Allow-Credentials', true);
  next();
});

2. XMLHttpRequest 옵션에 credentials 값을 true로

axiox 모듈에는 withCredentials라는 옵션이 있다. 일반 ajax나 XMLHttpRequest객체를 사용하면 그에 맞는 옵션 사항 들이 있을것으로 보인다.

export const instanceWithCredential = axios.create({
  baseURL: 'http://localhost:3102/',
  timeout: 180000,
  withCredentials: true
})
...
const url = '/api/v1.0/auth/session';
axiosInstance({
	method: 'get',
	url
}).then(response => {
	// Do Stuff
}).catch(error => {
	// Do Stuff
});