TIL 34 | 인가 실습

로그인과 회원가입의 함수는 (로그인 함수 마지막에 list 페이지로 이동하게 하는 것 말고는) 동일하다. 회원가입을 순서대로 진행해보자.

1. 먼저 회원가입 버튼을 만들자.

<button
  className="loginBox signUpBtn"
  type="button"
  onClick={this.signUp}
>
 {' '}
   회원가입{' '}
</button>

type을 설정하지 않으면 default값이 submit이기 때문에 type을 button으로 바꿔 디폴트 동작(?)을 막아주자. 원래 코드에 따라 페이지가 넘어가거나, 렌더링이 계속 다시 되는 등의 문제가 발생할 수 있다.

2. onClick함수에 fetch함수를 넣는다. (버튼 클릭시 인가가 진행되어야 하니까)

signUp = () => {
  fetch('http://주소/users/signup', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    email: this.state.idValue,
    password: this.state.pwdValue,
    }),
  })
  .then(res => res.json())
  .then(result => console.log(result));
};

원래 fetch 함수에 실습 주소로 받은 API 주소를 그대로 입력했다. 그랬더니 아래와 같은 오류가 발생했다.

Access to fetch at ‘API주소’ from origin ‘http://localhost:3000’ 
has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ 
header is present on the requested resource. 
If an opaque response serves your needs, 
set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

...? cors가 뭔데 날 힘들게 해.. 라는 생각이 몰려온다.

CORS가 뭐야?
CORS는 Cross-Origin Resource Sharing이다. 교차 출처 리소스 공유? 감이 온다. 현재 주소와 API주소 도메인이 다르기 때문인 것 같다.(참고로, 지금의 위치는 console.log(location.origin)으로 확인한다) 같은 출처가 되려면 스킴(http:// | https://), Host(localhost 등), Port(:80 등)이 동일해야 한다.

서버는 CORS를 위반해도 응답을 하고, 응답의 파기 여부는 브라우저가 결정한다. 도메인이 달라 브라우저가 이를 판단하여 CORS 정책 위반이라고 알려주는 경우 웹팩 개발서버에서 제공하는 기능인 'Proxy' 기능을 사용하면 된다. PROXY를 사용하면 브라우저에서 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고 현재 개발서버 주소로 요청을 하게 된다. 개발 서버는 프록시를 거쳐 백엔드에 전달하고, 백엔드에서 응답한 내용을 브라우저쪽으로 반환한다. CRA로 시작한 프로젝트에서는 package.json에서 proxy 값을 설정해서 간편하게 이용할 수 있다.

//package.json
{
  "name": "webucks_react_repo",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://52.79.143.176:8000"
}

설정을 했으면 login.js로 이동해 주소의 도메인을 생략한다.

signUp = () => {
  fetch('http://주소/users/signup', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    email: this.state.idValue,
    password: this.state.pwdValue,
    }),
  })
  .then(res => res.json())
  .then(result => console.log(result));
};

다시 npm start를 하면 도메인이 로컬호스트를 가리키게 되고 아까 말한 순서대로 데이터를 가져올 수 있게 된다. 실제 서비스 배포시에 서비스와 API의 도메인이 다르면 axios의 global URL을 설정하면 되니, 첫 번째 참고 블로그에서 참고하자.

참고 링크
https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html
https://evan-moon.github.io/2020/05/21/about-cors/