X-Requested-With

X-Requested-With

프로젝트 중에 로그인 axios를 했는데 실행이 되지 않았다.

백엔드 요청에 X-Requested-With 헤더가 포함되어 있었다. X-Requested-With 헤더는 해당 요청이 Ajax라는 것을 의미한다. 저렇게 백엔드 요청을 보고 있는 헤더는 추가해줘야 된다. 

그리고 X-Requested-With를 쓰는 다른 이유는 CORS를 통해 서버 동의 없이 Ajax 요청을 할 수 없기에 CSRF 공격을 방지할 수 있다. 즉 보안을 강화시켜준다.

적용

  const headers = {
    "X-Requested-With": "XMLHttpRequest",
  };

먼저 이렇게 headers 안에 헤더를 만들어 놓는다.

      axios
        .post(
          "https://waycabvav.shop/login",
          {
            loginId: id,
            password: password,
          },
          { withCredentials: true, headers }
        )

그리고 요청할 때 이런식으로 추가하면 된다.