문제 발생!

csrf token 구현 과정 중 Express 에서 Header 가 안찍힌다..

환경
프론트 : Nextjs
백 : Express
프록시서버 : Nginx
EC2 Server

프론트 (Nextjs)

axios.js // request header 에 _csrf-token 이라는 이름으로 csrf token을 보낸다.

api.interceptors.request.use(
  (config) => {
    config.headers["_csrf-token"] = useAuthStore.getState()?.csrfToken;
    return config;
  },
  ...
);

개발자 도구(cmd + option + i) 를 열어 network 를 확인해보면 Request Headers 안에 _csrf-Token 으로 잘 보내진다!

백엔드 (Express)

csrf.js // csrf middleware 에서 csrfHeader, req.headers 를 찍어본다

export const csrfCheck = (req, res, next) => {
  if (
    req.method === "GET" ||
    req.method === "HEAD" ||
    req.method === "OPTIONS"
  ) {
    return next();
  }

  const csrfHeader = req.get("_csrf-Token");
  console.log("====================================");
  console.log(csrfHeader);
  console.log("====================================");
  console.log("====================================");
  console.log(req.headers);
  console.log("====================================");

부들부들.. csrfHeader, req.headers 안나온다.

아무래도 nginx 에서 https → http 로 처리해 줄 때 문제가 있는 것 같다.

해결방법!

.

.

구글링 한 결과, 공식문서에 보면

https://nginx.org/en/docs/http/ngx_http_core_module.html#underscores_in_headers

undescores_in_headers : off // 언더스코어로 작성된 header 필드가 기본적으로 무시된다고 알려주고있다..!

_csrf-token 으로 네이밍이 되어있으니.. 당연히 안나오는게 맞다.

선택지 1. 네이밍 변경 → CSRF-TOKEN 
or
선택지 2. undescores_in_headers on

네이밍 바꾸는게 귀찮아서 and underscores 방식의 header를 추가할 일이 혹시 있을까 하여 선택지 2를 선택했다.

undescores_in_headers on

그러면 where? 어디에? 적용해야하냐! 고것이 문제로다

나는 ubuntu 리눅스 환경이니까 (ec2)

/etc/nginx 디렉토리로 가서

cd /etc/nginx

vim 으로 nginx.conf 를 열어주자

vim nginx.conf

잘보면 http 가 있고 { } 안에 넣어주자. 나는 맨 밑에 넣어줬다

http {
....
         ## HTTP 헤더에 밑줄(underscore)이 포함된 헤더를 허용
        underscores_in_headers on;
....
}

그리고 마지막으로 nginx restart 를 해준당

sudo service nginx restart

확인 !

굳! 잘나온다

[Nginx] Custom Request Header 값이 백엔드에서 확인이 불가능 해결 방법 (EC2, Express)