배포후 passport 쿠키 발행 안됨

[현정]

heroku랑 netlify로 서버와 클라이언트 연결해서 배포했는데
저번에 말씀하신 코드로 바꿔도 여전히 passport에서 쿠키 발행이 안되고 있습니다.
로그 찍어보니 로그인시에 정상적으로 작동하는데
쿠키발행하는 코드만 적용이 안되는거같습니다

[server.js]

app.post('/naver/login', function (req, res) {
  passport.authenticate('local', {}, function(error, user, msg){ 
      if (!user) {
        res.status(200).json({message:'fail'})
        console.log(res);
      } else {
        req.login(user, function(err){
          if(err){ return next(err); }
          res.status(200).json({message:'success'})
          db.collection('user').updateOne({id:req.user.id},{$set:{isLogin:true}},function(err,result){
            if(err) return err
            // console.log(req.user);
          })
        });
      }
  })(req, res);
});

passport.use(new LocalStrategy({
  usernameField: 'id', // <input>의 name 속성값
  passwordField: 'pw',
  session: true,
  passReqToCallback: false, //아이디/비번말고 다른 정보검사가 필요한지
}, function (입력한아이디, 입력한비번, done) {
  //console.log(입력한아이디, 입력한비번);
  db.collection('user').findOne({ id: 입력한아이디 }, function (에러, 결과) {
    if (에러) return done(에러)
  //아이디/비번 검사 성공하면 return done(null,결과) 실행
    if (!결과) return done(null, false, { message: '존재하지않는 아이디요' })
    if (입력한비번 == 결과.pw) {
      return done(null, 결과)
    } else {
      return done(null, false, { message: '비번틀렸어요' })
    }
  })
}));

// 로그인 성공시 세션을 저장시키는 코드
// 위 코드의 결과가 아이디/비번 검증 성공시 user로 들어감
passport.serializeUser(function (user, done) {
  done(null, user.id)
});

// 이 세션 데이터를 가진 사람을 찾아줌(마이 페이지 접속시 발동)
// 위에 user.id 랑 밑에 아이디랑 똑같은애
passport.deserializeUser(function (아이디, done) {
  db.collection('user').findOne({id: 아이디},
  function(error,result){
      done(null, result)
      // result는 mypage에서 찾은 데이터를 user를 통해 데이터전달가능 
  })
});

function 로그인했니(req,res,next){
  if (req.user){
      next()
  } else {
      res.send('로그인 안하셨어요')
  }
}

[Login.js (React)]

export default function Login(){
    const [id,setId] = useState('');
    const [pw,setPw] = useState('');
    const [modal,setModal] = useState(false)
    const navigate = useNavigate();

    const handleId = (e) => {
        setId(e.target.value)
    }
    const handlePw = (e) => {
        setPw(e.target.value)
    }
    
    const login = async() => {
        let body = {
            id: id,
            pw: pw
        }
        try {
            const res = await axios.post('https://movieproject-server.herokuapp.com/naver/login',body)
            if(res.data.message=='fail'){
                navigate('/login')
                console.log(res);
                alert('존재하지 않는 아이디,비밀번호 입니다.')
            }if (res && res.data.message =='success'){
                console.log(res);
                alert('로그인 성공')
                setModal(true)
            }
        }
        catch(error){
            console.log(error)
        }
    }

    const onSubmitHandler = async(e) => {
        e.preventDefault();
    }

    return (
    <div id="login_wrapper">
        <h1>Login</h1>
        <form onSubmit={onSubmitHandler} className='form'>
            <div>
                <label>Id</label>
                <input type="text" id="id" name="id" maxlength="20" placeholder="username" required onChange={handleId}/>
            </div>
            <div>
                <label>Password</label>
                <input type="text" id="pw" name="pw" maxlength="20" placeholder="password" required onChange={handlePw}/>
            </div>
            <button type="submit" id="btn_login" onClick={()=> login()}>로그인</button>
      {
        modal ===true ? <Modal/> : null
      }
        </form>
    </div>  
    )
}

[codingapple]

리액트에서 새로고침되면 이상해져서 form태그로 전송하지말고 ajax이용해서 로그인합시다

[현정]

음 위에서 form 태그 없애고
밑에처럼 수정하고 확인해봤을때
axios로 서버랑 리액트랑은 잘 연결이 되는데 여전히 쿠키가 발행이 안되네요
구글링했을때 리액트에서 axios요청시 옵션에{withCredentials:true}넣고
서버에도 cors옵션에 app.use(cors({origin:true,credentials:true})) 넣어보라해서
해봤는데 이것도 안통하네요ㅠ
<button id="btn_login" onClick={()=> login()}>로그인</button>

const login = async() => {
        let body = {
            id: id,
            pw: pw
        }
        try {
            const res = await axios.post('https://movieproject-server.herokuapp.com/naver/login',body,{
                withCredentials:true
            })
            if(res.data.message=='fail'){
                navigate('/login')
                console.log(res);
                alert('존재하지 않는 아이디,비밀번호 입니다.')
            }if (res && res.data.message =='success'){
                console.log(res);
                alert('로그인 성공')
                setModal(true)
            }
        }
        catch(error){
            console.log(error)
        }
    }

[codingapple]

로컬에선 잘되나요 express-session 라이브러리도 설치잘해놨나 확인합시다 

[현정]

로컬에서 실행해봤을때는 잘 작동해요
근데 저번에 알려주신 passport 미들웨어 말고 밑의 코드를 쓰면 로컬에서도 안되더라구요
기존 미들웨어로 쓰는 방식으로 했을땐 로컬에서는 되나 각각 배포후에는 안되네요
app.post('/login', function (요청, 응답) {
  passport.authenticate('local', {}, function(error, user, msg){ 
      if (!user) {
      응답.send('fail')
      } else {
        요청.login(user, function(err){
          if(err){ return next(err); }
        응답.send('success')
        });
      }
  })(요청, 응답);
});

개발할때는 axios요청 하는 주소가 로컬인데
배포할때는 heroku로 서버배포후 그 주소를 axios요청 주소로 바뀌어서
그것도 영향이 있는건가 싶어서
node만 heroku에 업로드 후에 그 주소를 axios 요청주소로 바꾸었더니
로그인시 쿠키 발행이 안되는 현상이 나타나더라고요

[현정]

해결 완료했습니다!
그냥 react build한뒤에 server에 합쳐서 axios 주소를 서버쪽으로 요청하는거로 바꿨더니
기능이 다 정상적으로 작동되네요 감사합니다!

[글쓴이]

글