node express react cors 에러 해결하기

리액트로 로그인을 구현할 때 액세스 토큰을 http only 쿠키로 저장하고 있다.

서버는 익스프레스를 쓰고 있다.

이럴 경우 cors 에러가 발생했을 때 해결해 보자!

• 서버에서 토큰 세팅해 주기

login route

    res.cookie("accessToken", accessToken, {
      maxAge: 1000 * 60 * 60 * 24 * 14,
      httpOnly: true,
    });

http only 14일의 쿠키를 구워주었다.

• 리액트에서 로그인 요청 보내기

  await axios
      .post(`${process.env.REACT_APP_SERVER}/api/users/login`, payload, {
        withCredentials: true,
      })...

axios post의 데이터 (payload) 부분 다음에 { withCredentials: true } 를 넣어 준다. withCredential 을 true로 하면 request에 쿠키 같은 credential 정보를 보내주고 쿠키 정보를 서버에서 받아올 수 있다.

• react cors 에러 처리

별로 좋아하지 않는 cors 에러가 나왔다. 프론트와 서버의 오리진 정보가 다를 때 통신을 허용하지 않는다. 오리진은 도메인과 포트 포함이다.

서버에서 cors 처리를 해준다. 이 때 주의할 점은 react에서 withCredentials : true 를 해줬기 때문에 서버에서 모든 오리진을 허용하면 (origin: '*') 하면 통신이 안된다. credential 통신을 할 때는 오리진의 제약이 있어야 한다. 뭔가 규약같은 걸로 정해져 있다고 한다.

node의 app.js(or index.js) 부분에 다음과 같이 cors 처리를 해준다.

const whitelist = [
  "http://localhost:3000",
  "http://localhost:5000",
  "http://127.0.0.1:3000",
  "http://127.0.01:5000",
];
var corsOptionsDelegate = function (req, callback) {
  var corsOptions;
  if (whitelist.indexOf(req.header("Origin")) !== -1) {
    corsOptions = { origin: true, credentials: true }; // reflect (enable) the requested origin in the CORS response
  } else {
    corsOptions = { origin: false }; // disable CORS for this request
  }
  callback(null, corsOptions); // callback expects two parameters: error and options
};
app.use(cors(corsOptionsDelegate));

여러개의 특정 오리진을 허용해 주고 credential : true 를 줬다.

마지막으로 한가지 주의할 점은 모든 라우터에서 preflight를 허용하기 위해 다음과 같이 옵션을 주는 경우가 있다.

app.options("*", cors());

이 경우 preflight의 옵션 리퀘스트가 모든 라우터에 통과되게 되는데 여기서도 모두 허용 * 을 주면 서로 통신이 안된다. 이 옵션은 위에서 오리진을 이미 허용해 줬기 때문에 필요가 없다.