withCredentials

클라이언트에서 로그인 요청 시 서버에서는 확인 후 cookie에 token을 담아 전송한다.

같은 origin의 경우 request header 에 cookie가 추가되는데 orgin이 달라지는 경우 자동으로 추가되지 않는다.

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

front

axios 로 통신할 시,withCredentials 설정을 true로 바꾼다.

  loginRequestHandler() {
    
     const {userId, password} = this.state;

     axios
      .post("https://localhost:4000/login",
        { userId, password },
        { headers: { "Content-Type" : "application/json"}, withCredentials: true}
      )
      .then((res) => {
        this.props.loginHandler(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  }

back

backend에서도 마찬가지로 Credential 설정을 true로 해준다

// node.express 
const cors = require("cors");

app.use(
  cors({
    origin: ["https://localhost:3000"],
    credentials: true,
    methods: ["GET", "POST", "OPTIONS"],
  })
);

"Content-Type" : "application/json"

Indicates that the request body format is JSON.
HTTP 메시지(요청과 응답 모두)에 담겨 보내는 데이터의 형식을 알려주는 헤더 (설정하지 않으면 서버에서 제대로 받아들이지 x)

경우에 따라 다르게 설정 가능하지만,
보통 json타입으로 전송하기 때문에 json으로 설정

Content-Type은 POST나 PUT처럼 메시지 BODY에 데이터를 싣어 보낼때 중요
GET방식인 경우에는 무조건 URL 끝에 쿼리스트링으로 key=value 형식으로 날아가기 때문에 굳이 Content-Type 헤더가 필요 x. 웹서버 입장에서도 요청메시지의 METHOD가 GET이면 key=value 형식의 데이터라는것을 유추할 수 있다.

참고블로그

Accept : application/json

Sets output type to JSON.
브라우저(클라이언트) 에서 웹서버로 요청시 요청메시지에 담기는 헤더.
자신에게 이러한 데이터 타입만 허용하겠다는 뜻
-> 브라우저가 요청 메시지의 Accept 헤더 값을 application/json이라고 설정했다면 웹서버에게 나는 json 데이터만 처리할 수 있으니 json 데이터 형식으로(웬만하면) 응답을 돌려줘 라고 말하는것과 같다.

참고