[React] express 서버와 연결하기

1. /front 폴더에 react 설치

2. /backend 폴더에 서버를 설치

const express = require("express");
const app = express();


const server = app.listen(8000, () => {
  console.log("server start");
});

3. 데이터 주고 받기

(1) cors 보안정책

cors 보안정책 때문에 하나의 브라우저에서 다른 도메인/포트의 서버로 요청하면 에러가 나타난다.

프론트와 백 두개의 서버를 동시에 실행하려면 cors로 접근을 허용해 줘야 한다.

이와 같이 하는 이유는 해킹과 보안문제 때문이다. 누구나 접근할수 있다면 데이터 전송을 가로채 보안에 문제가 생김

const cors = require("cors");

const options = {
  origin: "http://localhost:3000",
};

app.use(express.json());
app.use(cors(options));

 

cors option origin 종류 예시

const options = {
  origin: "*", // 누가오든 요청 허용 : 보안을 풀어버리는 거임
  origin: true, // 들어오는 요청 도메인 / 포트가 자동으로 origin에 들어간다.
  origin: "도메인", // 실제로 서비스되는 도메인을 입력해줘서 해당 도메인만 접근할수 있게 허용한다.
  credential: boolean값, //(사용자 인증이 필요한 리소스를 접근 을 허용해줄지 안할지 쿠키같은거 등등)
};

 

(2) 클라이언트 미들웨어에서 데이터 보내기

await 로 데이터를 보내고 서버에서 받은 데이터가 user.data에 할당된다.

const login = (id, pw) => {
  return async (dispatch, getState) => {
    const user = await axios({
      method: "post",
      url: "http://localhost:8000/login",
      data: {
        id,
        pw,
      },
    });

    if (user.data) {
      dispatch({ type: "LOGIN", payload: { id, pw } });
    } else {
      alert("로그인 실패");
    }
  };
};

(3) 서버에서 데이터 받고 보내기

app.post("/login", async (req, res) => {
  let { id, pw } = req.body;
  const users = await user.findOne({
    where: { user_id: id, user_pw: pw },
  });

  if (users) {
    res.send(true);
  } else {
    res.send(false);
  }
});