inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React로 NodeBird SNS 만들기

7-2. SSR을 위해 쿠키 넣어주기

서버사이드 렌더링 LOAD_USER_REQUET 날리면 LOAD_USER_FAILURE 가 출력되요

226

terecal

작성한 질문수 162

0

LOAD_USER_REQUEST를 _app.js의  getInitialProps로 옮긴뒤에  에러가  발생하는데 여기에서 발생한 에러가 배포때도 발생했던거 같아여 근데 에러 원인을 못찾고 있어서요

한번 검토해주시면 대단히 감사여~!

NodeBird.getInitialProps = async (context=> {
    // console.log(context);
    const { ctxComponent } = context;
    // console.log("ctx.store : ", ctx.store);
    
    let pageProps = {};

    const state = ctx.store.getState();
    const cookie = ctx.isServer ? ctx.req.headers.cookie : '';
    axios.defaults.headers.Cookie = '';
    if (ctx.isServer && cookie) {
        axios.defaults.headers.Cookie = cookie;
    }

    if (!state.user.me) {
        ctx.store.dispatch({
            type: LOAD_USER_REQUEST,
        });
    }
    
    if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx) || {}
    }
    return { pageProps };
};

git

https://github.com/hyunsokstar/node_bird_44/blob/master/front/pages/_app.js

메인 페이지를 출력할때 프론트 콘솔에서 에러 메세지가 출력됩니다.

action :  { type: 'LOAD_USER_FAILURE',
  error:
   { Error: Request failed with status code 401
       at createError (C:\node_bird_44\front\node_modules\axios\lib\core\createError.js:16:15)
       at settle (C:\node_bird_44\front\node_modules\axios\lib\core\settle.js:17:12)
       at IncomingMessage.handleStreamEnd (C:\node_bird_44\front\node_modules\axios\lib\adapters\http.js:237:11)
       at IncomingMessage.emit (events.js:203:15)
       at endReadableNT (_stream_readable.js:1145:12)
       at process._tickCallback (internal/process/next_tick.js:63:19)
     config:
      { url: 'http://localhost:3065/api/user/',
        method: 'get',
        headers: [Object],
        baseURL: 'http://localhost:3065/api',
        transformRequest: [Array],
        transformResponse: [Array],
        timeout: 0,
        withCredentials: true,
        adapter: [Function: httpAdapter],
        xsrfCookieName: 'XSRF-TOKEN',
        xsrfHeaderName: 'X-XSRF-TOKEN',
        maxContentLength: -1,
        validateStatus: [Function: validateStatus],
        data: undefined },
     request:
      ClientRequest {
        _events: [Object],
        _eventsCount: 6,
        _maxListeners: undefined,
        output: [],
        outputEncodings: [],
        outputCallbacks: [],
        outputSize: 0,
        writable: true,
        _last: true,
        chunkedEncoding: false,
        shouldKeepAlive: false,
        useChunkedEncodingByDefault: false,
        sendDate: false,
        _removedConnection: false,
        _removedContLen: false,
        _removedTE: false,
        _contentLength: 0,
        _hasBody: true,
        _trailer: '',
        finished: true,
        _headerSent: true,
        socket: [Socket],
        connection: [Socket],
        _header:
         'GET /api/user/ HTTP/1.1\r\nAccept: application/json, text/plain, */*\r\nCookie: csrftoken=WuKOL81KoP6bPpGF3JIoGz7SkqVxtUQ5F7xS5HnVBkUnrjNlXL6f68xZqIhrlpSh; sessionid=wvc3o2k14fpq56kbj76e0qzy25bn9r8a\r\nUser-Agent: axios/0.19.0\r\nHost: localhost:3065\r\nConnection: close\r\n\r\n',
        _onPendingData: [Function: noopPendingOutput],
        agent: [Agent],
        socketPath: undefined,
        timeout: undefined,
        method: 'GET',
        path: '/api/user/',
        _ended: true,
        res: [IncomingMessage],
        aborted: undefined,
        timeoutCb: null,
        upgradeOrConnect: false,
        parser: null,
        maxHeadersCount: null,
        _redirectable: [Writable],
        [Symbol(isCorked)]: false,
        [Symbol(outHeadersKey)]: [Object] },
     response:
      { status: 401,
        statusText: 'Unauthorized',
        headers: [Object],
        config: [Object],
        request: [ClientRequest],
        data: '로그인이 필요' },
     isAxiosError: true,
     toJSON: [Function] } }

react javascript

답변 2

0

terecal

로그인을 한상태에서 했는데 에러가 발생해요 에러 메세지도 로그인을 한상태에서 새로고침했을때 찍힌 메세지에요 그리고 실패한다음에 다시 프론트 렌더링으로 돌리면 로그인 유지가 성공해요 아무래도 서버 사이드 렌더링쪽에 문제가 있는거 같은데 브라우져 문제일수도 있어서 환경 초기화하고 기록 다 삭제해도 안되여

127.0.0.1:3060이 아니라  localhost:3060으로 요청하면 될거 같기도 한데

저번처럼 배포단계에서 또 로그인 유지가 안될것 같아서 여기에서 에러 원인을 파악해야 될것 같은데 코드상의 문제는 없는것일까여?

0

PaPillOn빠삐용

혹시 문제해결 하셨나요?

0

제로초(조현영)

로그인을 안 한 경우면 이 401 에러가 나는 건 어쩔 수 없습니다. 로그인을 안 했는데 유저를 불러오는 것이니까요.

next 10 이상에서는 redux dev tool 구동이 안되나요?

0

272

1

세션 갱신 문의 건

0

484

7

배포 진행 후 Highlight updates components render 표시

0

445

1

똑같은 기능을 하는 테이블

0

448

4

관계형

0

312

2

프론트 서버를 이용하지 않는경우

1

299

3

인피니트 스크롤링 사용시 오류

0

278

0

계속 이런에러가 떠서 해결하기는 했는데 어떤 의미인지 모르겠습니다.

0

434

2

req.user가 언제 생성되나요??

0

330

2

Cannot read property 'id' of null 에러

0

333

1

리트윗한 게시글 불러오는 sequelize

0

252

1

result.data에서 images인 이유

0

281

2

takeLatest에 대한 질문입니다.

1

342

2

프론트에서 express를 사용하지 않을때 동적라우팅

0

501

6

getInitialProps가 클라이언트에서 수행되는 이유?

0

258

1

리로드하면 팔로우 언팔로우 값이 초기화 되는 문제입니다.

0

445

2

스타일드 컴포넌트와 className을 통한 스타일 적용의 차이에 대해 궁금합니다

0

585

2

할인 쿠폰 사용이 안되는되요 (848-f9af83f183e3)

0

365

1

nodejs mvc 패턴

0

976

4

사용하고 보니, 람다 구성이 궁금합니다!

0

266

1

제로초님

0

445

1

새로고침 로그인 풀림 문제.

0

247

1

안녕하세요. 강의 너무 감사합니다

0

157

1

제로초님

0

170

1