Application > Cookies 에 front에만 저장이 안 돼요...
2649
작성한 질문수 14
안녕하세요 제로초님,
Application > Cookies 에 sid가 front에만 저장이 안 되는 문제가 있습니다. sid가 back에는 저장이 됩니다.
제가 아직 쿠키와 세션 이해가 부족한 건지.. axios config에 뭔가 문제가 있는건지,,,
구글링 해봐도 별 거 안 나오고.. 제가 이미 다 한 거고...
front: config/config.ts
import axios from "axios";
import { backUrl } from "../../config/config";
axios.defaults.baseURL = backUrl;
axios.defaults.withCredentials = true;
const instance = axios.create({
baseURL: backUrl, // cors
withCredentials: true, // cookie (user info)
});
// instance.interceptors.request.use(function (instance) {
// const kakao_authorization = localStorage.getItem("kakao_authorization");
// const Token = localStorage.getItem("Authorization");
// const Retoken = localStorage.getItem("refresh-Token");
// instance.headers["Authorization"] = Token;
// instance.headers["refresh-Token"] = Retoken;
// instance.headers["kakao_authorization"] = kakao_authorization;
// return instance;
// });
export default instance;
front - Network 탭
front - Application > Cookies 탭
back: app.js
const express = require('express');
const morgan = require('morgan');
const cors = require('cors');
const session = require('express-session');
const cookieParser = require('cookie-parser');
const passport = require('passport');
const dotenv = require('dotenv');
const path = require('path');
const hpp = require('hpp');
const helmet = require('helmet');
const userRouter = require('./routes/user');
const postRouter = require('./routes/post');
const postsRouter = require('./routes/posts');
const db = require('./models');
const passportConfig = require('./passport');
dotenv.config();
const app = express();
db.sequelize.sync()
.then(()=>{
console.log('db 연결 성공');
})
.catch(console.error);
passportConfig();
app.use(express.json()); // axios로 data보낼 때
app.use('/', express.static(path.join(__dirname, 'uploads'))); // multipart form data
app.use(express.urlencoded({ extended: true })); // 일반 form 일 때에는 url encoded로 받음
if (process.env.NODE_ENV === 'production') {
app.use(morgan('combined'));
app.use(hpp());
app.use(helmet({ contentSecurityPolicy: false }));
app.use(cors({
origin: 'http://shinyoungyou.com',
credentials: true,
}));
} else {
app.use(morgan('dev'));
app.use(cors({
origin: true,
credentials: true,
}));
}
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
saveUninitialized: false,
resave: false,
secret: process.env.COOKIE_SECRET,
cookie: {
httpOnly: true,
secure: false
},
domain: process.env.NODE_ENV === 'production' && '.shinyoungyou.com'
}));
app.use(passport.initialize());
app.use(passport.session());
app.get('/', (req, res) => {
res.send('Express + TypeScript Server');
});
app.post('/api/post', (req, res) => {
res.send('this is post http method');
});
app.use("/user", userRouter);
app.use("/post", postRouter);
app.use("/posts", postsRouter);
module.exports = app;
back - Application > Cookies 탭
답변 11
0
한 번에 2개 요청이 간걸 보아
loadMyInfo, loadPosts가 백엔드로 요청은 가는 거 같은데,
여기에서 쿠키 전달이 안 되는지
const cookie = context.req ? context.req.headers.cookie : '';
axios.defaults.headers.Cookie = '';
if (cookie) {
axios.defaults.headers.Cookie = cookie;
}
my에 null을 반환하는 거 같네요.. SSR이라서 그런지는 모르겠지만 새로고침 이후 Network 탭에 응답 온게 확인이 안 되네요.. html css js 받기 전에 data를 불러오는 거라서..?
프론트에서
pages/index 는 이런 식으로 코드를 짜놓았구요.
import wrapper from '../store';
import { useSelector, useDispatch } from 'react-redux';
import { loadMyInfo } from "../store/thunks/user";
import { loadPosts } from "../store/thunks/post";
import React, { useState, useEffect } from "react";
import type { NextPage } from 'next';
import RootState from "../store/state-types";
import axios from "axios";
import AppLayout from '../components/AppLayout';
import PostForm from '../components/PostForm';
import PostCard from '../components/PostCard';
import Link from "next/link";
const Home: NextPage = () => {
const { my } = useSelector((state: RootState)=>state.user);
const { mainPosts, loadPostsLoading, bringMorePosts } = useSelector((state: RootState)=>state.post);
const dispatch = useDispatch();
const [prevLastId, setPrevLastId] = useState<number>(-1);
// useEffect(()=>{
// if(mainPosts.length < 10){
// dispatch(loadMyInfo());
// dispatch(loadPosts());
// }
// console.log("loadPosts")
// }, [])
useEffect(()=>{
const handleScroll = () => {
if(window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300){
if(!loadPostsLoading && bringMorePosts){
if(prevLastId != mainPosts[mainPosts.length - 1]?.id){
dispatch(loadPosts({
lastId: mainPosts[mainPosts.length - 1]?.id
}));
}
setPrevLastId(mainPosts[mainPosts.length - 1]?.id);
}
}
}
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
}
}, [loadPostsLoading, bringMorePosts])
return (
<AppLayout>
{my !== null && <PostForm/>}
{mainPosts.map((post)=>(post.Retweet ? <PostCard post={post.Retweet} posts={mainPosts} retweetingPostId={post.id} key={post.id} /> : <PostCard post={post} posts={mainPosts} retweetingPostId={null} key={post.id} />))}
</AppLayout>
)
}
export const getServerSideProps = wrapper.getServerSideProps(async (context)=>{
const cookie = context.req ? context.req.headers.cookie : '';
axios.defaults.headers.Cookie = '';
if (cookie) {
axios.defaults.headers.Cookie = cookie;
}
await context.store.dispatch(loadMyInfo());
await context.store.dispatch(loadPosts({}));
// console.log(context.req);
});
export default Home;그리고 프론트에서 cookie를 console.log을 하고 싶은데 npx pm2 kill을 하고 터미널 kill을 해도 제 브라우저가 살아있어서 npm start를 하면 already in use ::80 에러가 뜨네요..
웃긴게 np2 pm2 reload all 을 하고 list보니까 아무것도 없고요 ㅋㅋㅋ
그래서.. 쿠키가 안 받아지는 건 어디에서 시작된 버그인지 감이 안 잡히는데 도와주실 수 있을까요 엉엉...
0
getServerSideProps에서 보낸 요청은 브라우저 콘솔에 안 뜨는 게 맞습니다.
쿠키가 안 받아지는 건 어디에서 시작된 버그인지 감이 안 잡히는데 도와주실 수 있을까요 엉엉...
쿠키가 안 받아진다는 게 무슨 뜻인가요? 지금 문제는 쿠키 문제인지 알수가 없는데요.
강좌처럼 리덕스 사가 쓰시는 건가요? 그러면 getServerSideProps 코드가 저게 아닙니다. 강좌 코드 다시 봐보세요.
0
제로초님 덕분에 쿠키에 domain 넣는 거는 성공 했는데, domain 넣는 거랑 새로고침 시 로그인 풀리는 건 다른 문제 인가요? 감사합니다.
백엔드 
0
아예 NODE_ENV 컨디션을 빼보고 다시 로그인 시도 했는데도 똑같아요
사진 붙여도 의미는 없겠지만..
0
네네
"start": "cross-env NODE_ENV=production pm2 start index.js",이거를 해주고 npx pm2 kill 했다가 npm start를 했고, 한 번 더 확인을 위해 process.env.NODE_ENV까지 화면에 찍어보았습니다..
0
{
"name": "serverjs-nextproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODE_ENV=production pm2 start index.js",
"dev": "nodemon index"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"aws-sdk": "^2.710.0",
"bcrypt": "^5.1.0",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"cross-env": "^7.0.2",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"express-session": "^1.17.3",
"helmet": "^3.23.3",
"hpp": "^0.2.3",
"morgan": "^1.10.0",
"multer": "^1.4.5-lts.1",
"multer-s3": "^2.9.0",
"mysql2": "^3.1.1",
"passport": "^0.6.0",
"passport-local": "^1.0.0",
"pm2": "^4.4.0",
"sequelize": "^6.28.0",
"sequelize-cli": "^6.6.0"
},
"devDependencies": {
"nodemon": "^2.0.20"
}
}
0
쿠키에 Domain 속성이없는데요.(.shinyoungyou.com이어야 합니다) 백엔드에서 process.env.NODE_ENV가 production이 맞나요? 서버 실행 명령어에 NODE_ENV=production 붙이셨나요?
넥스트 버젼 질문
0
78
2
로그인시 401 Unauthorized 오류가 뜹니다
0
89
1
무한 스크롤 중 스크롤 튐 현상
0
175
1
특정 페이지 접근을 막고 싶을 때
0
103
2
createGlobalStyle의 위치와 영향범위
0
96
2
인라인 스타일 리렌더링 관련
0
91
2
vsc 에서 npm init 설치시 오류
0
147
2
nextjs 15버전 사용 가능할까요?
0
158
1
화면 새로고침 문의
0
121
1
RTK에서 draft, state 차이가 있나요?
0
153
2
Next 14 사용해도 될까요?
0
452
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
349
1
url 오류 질문있습니다
0
211
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
373
1
sudo certbot --nginx 에러
0
1275
2
Minified React error 콘솔에러 (hydrate)
0
470
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
247
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
327
1
npm run build 에러
0
518
1
front 서버 npm run build 중에 발생한 에러들
0
382
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
338
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
288
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
239
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
201
1