inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

Slack 클론 코딩[실시간 채팅 with React]

로그인 페이지 만들기

set-cookie가 제대로 동작하지 않습니다.

2164

모야호

작성한 질문수 2

0

안녕하세요 제로초님

강의 잘 보고 있습니다.

 

로그인할 때, set-cookie가 제대로 적용되지 않아 어려움을 겪고 있습니다.  아래처럼 header에 set-cookie가 날라오긴 하는데, 느낌표가 뜨면서 제대로 저장이 되질 않습니다.

쿠키가 저장이 되지 않아 다음 스텝으로 넘어갈 수가 없습니다.  다음 swr 버전 적용을 front 디렉토리 에서 하신 것 같아 npm i 하고 실행해본 결과, 똑같은 현상이 일어나는데 어떻게 해결하면 좋을까요 ..?

로그인 로직은 swr과 관련이 없는 것 같아 강의 때 작성해주신 alecture 폴더로 돌려보았는데, 잘 동작해서 무엇이 문제인지 어떻게 고쳐야할 지 감이 오질 않습니다 .. 

로그인 쪽 코드는 다음과 같습니다.

const LogIn = () => {
const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher);
const [logInError, setLogInError] = useState(false);
const [email, onChangeEmail] = useInput('');
const [password, onChangePassword] = useInput('');
const onSubmit = useCallback(
(e) => {
e.preventDefault();
setLogInError(false);
axios
.post(
'http://localhost:3095/api/users/login',
{ email, password },
{
withCredentials: true,
},
)
.then((response) => {
mutate();
})
.catch((error) => {
setLogInError(error.response?.data?.statusCode === 401);
});
},
[email, password, mutate],
);

if (data === undefined) {
return <div>로딩중...</div>;
}

if (data) {
return <Redirect to="/workspace/sleact/channel/일반" />;
}

Socket.io babel react typescript 웹팩 클론코딩

답변 1

0

제로초(조현영)

느낌표가 뜨면 느낌표 위에 손 올려보시면 에러 내용이 나옵니다 ㅎㅎ

0

모야호

헉. 마우스를 올려보면 되는 거였군요.. ㅋㅋ

Issue 탭도 열어보았는데 이런 식으로 에러가 뜨는 것을 확인했습니다.

Proxy 서버를 사용하면 해결 되는 것인지, 백엔드 단에서 sameSite 설정을 해주면 되는지 궁금합니다.

그런데 어째서 강의 때 사용하신 alecture쪽은 실행이 잘 되는 걸까요..? 같은 서버단 코드를 사용하고 있는데 잘 되어서 궁금합니다 .. 

0

제로초(조현영)

일단 저와 코드가 다르기 때문에 해당 에러가 발생한 것인데요. 백엔드 서버도 back 폴더 코드 사용하신 게 맞나요? 프론트쪽은 일부분만 제 코드로 복사해서 해서 어떤 부분이 달랐던 것인지 좁혀보세요.

1

모야호

안녕하세요 ! proxy로 해당 부분 고치고도 계속 SameSite 설정하라고 오류가 떠서 당황했는데,

크롬에서 127.0.0.1 -> localhost로 주소를 바꾸니까 제대로 잘 작동합니다! localhost랑 127.0.0.1은 루프백으로 연결되어 있다고 알고 있는데, 이렇게 다르게 동작할 수도 있는 걸까요 ? 🤔

 

1

제로초(조현영)

https://stackoverflow.com/questions/12491750/localhost-doesnt-point-to-127-0-0-1

이런식으로 host 파일에 localhost에 다른 아이피가 연결되어있으면 127.0.0.1이 아닐 수 있고요. 서버에서도 localhost랑 127.0.0.1은 이름이 다르므로 같은 주소라고 생각하지 않을 수있습니다. 하나로 통일이 필요합니다.

기본 셋팅과 관련하여

0

91

1

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

0

96

2

focus 시에만 화면 업데이트 되는 이유 + 해결방법

0

149

2

useEffect 개수 관리

0

109

2

라이브러리 서치 방법

0

103

2

함수 정의 패턴

0

77

1

npm run dev 에러

0

152

3

npx webpack 후 에러

0

178

2

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

0

143

2

사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')

1

178

2

초기세팅중 packge.json 에러떠요

0

155

2

CORS - Access-Control-Allow-Origin 누락 문제

0

430

3

로그인 페이지 무한 새로고침 현상

0

598

2

Module not found: Error: Can't resolve './App' 에러

0

955

1

배포 방법

0

296

2

npm run dev 시 빌드가 매우 느려졌습니다

0

989

2

alias 경로 설정 오류

0

448

2

fetcher 함수의 data 값이 두번 찍히는 이유

0

275

1

제네릭 질문

0

217

2

ts-node 대신 tsx 사용여부

0

373

1

배포 관련 질문

0

247

1

[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.

0

385

2

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

0

336

1

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

0

247

2