inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] React로 NodeBird SNS 만들기

쿠키/세션과 전체 로그인 흐름.

CORS 설정을 했지만 CORS오류가 발생합니다.

839

윤채현

작성한 질문수 8

0

안녕하세요 제로초님 다름이 아니라 로그인 기능을 모두 구현하고 혹시나 원래 잘되던 회원가입이 안되나해서 돌려보던 참에 갑자기 회원가입에서 CORS오류가 발생해서 멘붕이 왔습니다.

처음에 CORS설정하고 회원가입을 했을땐 잘 작동했었습니다...

설정도 그대로구요.. 어떤게 문제인지 모르겠어서 질문남깁니다.

  1. 콘솔 오류 사진 2.back/app.js 코드

    const express = require("express");
    const postRouter = require("./routes/post");
    const userRouter = require("./routes/user");
    const cors = require("cors");
    const session = require("express-session");
    
    const passport = require("passport");
    const cookieParser = require("cookie-parser");
    const dotenv = require("dotenv");
    const app = express(); //익스프레스 서버
    const db = require("./models");
    const passportConfig = require("./passport");
    
    db.sequelize
        .sync()
        .then(() => {
            console.log("db 연결 성공");
        })
        .catch(console.error);
    
    dotenv.config();
    
    passportConfig();
    app.use(express.json());
    //익스프레스서버에 뭔가를 장착하겠다.
    //프론트에서 Json 형식으로 받은 것을 req.body에 넣어준다.
    app.use(express.urlencoded({ extended: true }));
    //form에서 제출한 것을 넘겨준다.
    //front에서 보낸 action.data를 req.body에 넣어주느 역할
    app.use(
        session({
            saveUninitialized: false,
            resave: false,
            secret: process.env.COOKIE_SECRET,
        })
    );
    app.use(passport.initialize());
    app.use(passport.session());
    app.use(cookieParser(process.env.COOKIE_SECRET));
    app.get("/", (req, res) => {
        res.send("hello express");
    });
    app.get("/api", (req, res) => {
        res.send("hello api");
    });
    
    app.get("/api/posts", (req, res) => {
        res.json([
            { id: 1, content: "hello" },
            { id: 2, content: "hello2" },
            { id: 3, content: "hello3" },
        ]);
    });
    app.use(
        cors({
            origin: true,
            credentials: false,
        })
    );
    //cors설정
    //res.setHeader("Access-Control-Allow-Origin", "http://localhost:3060");
    //CORS해결법 *은 모든 주소에 대해서 라는 뜻
    //localhost 3060에서 온 것은 허용해주게싸
    app.use("/post", postRouter); //"/post"가 중복되므로 앞으로 뽑아줄 수 있다.
    app.use("/user", userRouter); //"/post"가 중복되므로 앞으로 뽑아줄 수 있다.
    
    app.listen(3065, () => {
        console.log("서버 실행 중");
    });

     

     

react redux node.js express next.js

답변 1

0

제로초(조현영)

app.use cors 부분이 라우터보다 더 위에 있어야하고요. 그다음에 백엔드 콘솔에 다른 에러 없는지 확인해보세요. 에러가 있는 경우에도 cors 적용이 안 되었다고 나올 수 있습니다.

0

윤채현

코드를 위로 올리는 방식으로 해결했습니다!

다만 요청을 보냈을때
코드 500과 함께 아래와 같은 오류가 납니다..

Error: secret option required for sessions
    at session (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/express-session/index.js:200:12)
    at Layer.handle [as handle_request] (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/express/lib/router/index.js:328:13)
    at /Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/express/lib/router/index.js:280:10)
    at urlencodedParser (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/body-parser/lib/types/urlencoded.js:82:7)
    at Layer.handle [as handle_request] (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/express/lib/router/index.js:328:13)
    at /Users/ihyeoncheol/Desktop/nodebird_project/prepare/back/node_modules/express/lib/router/index.js:286:9

0

윤채현

방금 올렸던 secret 관련 오류는 오타 수정으로 해결했습니다.



그런데 갑자기.. 이상한 곳에서 오류가 잔뜩나네요..

 

0

윤채현

로그인까지는 잘 진행되었습니다

0

제로초(조현영)

UserProfile 해당 위치 가보세요. 서버에서 유저 정보 보내줄 때 Posts나 FollowerList같은 거 빼고 주는 거 아닌가요

0

윤채현

import React, { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Card, Avatar, Button } from "antd";

import { logoutRequestAction } from "../reducers/user";

const UserProfile = () => {
    const dispatch = useDispatch();
    const { me, logOutLoading } = useSelector((state) => state.user);

    const onLogOut = useCallback(() => {
        dispatch(logoutRequestAction());
    }, []);

    return (
        <Card
            actions={[
                <div key="twit">
                    짹짹
                    <br />
                    {me.Posts.length}
                </div>,
                <div key="followings">
                    팔로잉
                    <br />
                    {me.Followings.length}
                </div>,
                <div key="followings">
                    팔로워
                    <br />
                    {me.Followers.length}
                </div>,
            ]}
        >
            <Card.Meta
                avatar={<Avatar>{me.nickname[0]}</Avatar>}
                title={me.nickname}
            />
            <Button onClick={onLogOut} loading={logOutLoading}>
                로그아웃
            </Button>
        </Card>
    );
};

export default UserProfile;

Posts.length부분에서 오류가나네요..

0

윤채현

redux에서 보면 LOAD_POST_SUCCESS는 잘 뜹니다.. 게시글도 잘 불러오는 것 같구요

 

0

윤채현

아 게시물 잘 가져오는거는 로그인 전이네요..

0

제로초(조현영)

다시 말씀드리지만 서버에서 보내는 유저 정보를 확인해보세요.

넥스트 버젼 질문

0

75

2

로그인시 401 Unauthorized 오류가 뜹니다

0

88

1

무한 스크롤 중 스크롤 튐 현상

0

172

1

특정 페이지 접근을 막고 싶을 때

0

103

2

createGlobalStyle의 위치와 영향범위

0

93

2

인라인 스타일 리렌더링 관련

0

90

2

vsc 에서 npm init 설치시 오류

0

146

2

nextjs 15버전 사용 가능할까요?

0

158

1

화면 새로고침 문의

0

119

1

RTK에서 draft, state 차이가 있나요?

0

151

2

Next 14 사용해도 될까요?

0

452

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

348

1

url 오류 질문있습니다

0

210

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

372

1

sudo certbot --nginx 에러

0

1271

2

Minified React error 콘솔에러 (hydrate)

0

467

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

245

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

325

1

npm run build 에러

0

517

1

front 서버 npm run build 중에 발생한 에러들

0

381

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

335

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

283

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

235

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

198

1