node.js 회원가입 부분(react 연동) Cannot POST /login 에러

[김상우]

리액트와 node.js 서버 연동 후 

회원가입 부분 문제입니다.

login페이지에서 로그인 요청 시 Cannot POST /login 이라는 페이지가 나옵니다.

위의 상황은 react 프로젝트에서 npm start로 했을때이고

 

서버에서 8080포트로 접속하여 로그인 요청을 하면 그냥 새로고침만 되고

아무 반응이 없습니다...  어떻게 해야하나요??

 
<h2>서버 파일</h2>
app.post(
  "/login",
  passport.authenticate("local", {
    failureRedirect: "/fail",
  }),
  function (req, res) {
    res.redirect("/");
  }
);

// localStrategy 인증 방식 코드
passport.use(
  new LocalStrategy(
    {
      usernameField: "id",
      passwordField: "pw",
      session: true,
      passReqToCallback: false,
    },
    function (입력한아이디, 입력한비번, done) {
      console.log(입력한아이디, 입력한비번);
      db.collection("member").findOne(
        { id: 입력한아이디 },
        function (에러, 결과) {
          if (에러) return done(에러);

          if (!결과)
            return done(null, false, { message: "존재하지않는 아이디" });
          if (입력한비번 == 결과.pw) {
            return done(null, 결과);
          } else {
            return done(null, false, { message: "비밀번호 틀림" });
          }
        }
      );
    }
  )
);

// 로그인 성공 시 id를 이용해서 세션을 저장시키는 코드
passport.serializeUser(function (user, done) {
  done(null, user.id);
});
passport.serializeUser(function (아이디, done) {
  done(null, {});
});

// 유저가 이상한 경로를 요청하였으나 서버에 해당 기능이 없을 경우
// 리액트 라우터가 라우팅을 담당하여 처리하게 함
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "shotz_project/build/index.html"));
});

 
<h2>리액트 파일</h2>
 

function LogIn() {
  return (
    <div className="login_page">
      <div className="login_form">
        <form className="login_box" action="/login" method="POST">
          <label>아이디</label>
          <input className="user_id" type="text" name="id" />
          <label>비밀번호</label>
          <input className="user_password" type="password" name="pw" />
          <button className="push_login" type="submit">
            로그인
          </button>
        </form>
        <label className="login_ask">아직 회원가입을 안하셨나요?</label>
        <Link to="/signUp">
          <button className="move_signup" type="submit">
            회원가입 하러가기
          </button>
        </Link>
      </div>
    </div>
  );
}

 

[codingapple]

리액트에선 폼태그말고 ajax요청으로 합시다

[글쓴이]

글