[Node.js, Vue.js] ::디버깅:: 새로 고침 404 에러, redirect 에러

 

 

여는 글

---

 

서브 페이지에서 새로 고침하면 404 뜨는 건 개발 초기에 vue 문제라는 걸 구글링해서 알고 있는 상태였다.

 

redirect 에러는 회원 가입 페이지를 구현하면서 회원 가입이 완료되면 로그인 페이지로 이동하도록 구현하고 싶었으나 redirect 명령어를 사용하면 404에러가 뜨고 url 창에 직접 경로를 쳐도 404가 뜬다는 걸 알게됐고 메인 페이지로의 이동만 가능했기 때문에 회원 가입 후 메인 페이지로 이동하도록 구현해놓은 상태다.

 

이번에 새로 고침하면 404뜨는 에러를 고치기 위해서 구글링하다보니 redirect 문제까지 해결할 수 있다는 것을 알았다.

 

미들웨어 connect-history-api-fallback를 사용하는 것.

 

구글링하면서 vue 포럼에서 이 미들웨어를 사용하는 것을 추천하길래 사용하려고 시도했더니 해결됐다.

 

 

 

connect-history-api-fallback 사용하기

---

 

Node.js에 아래 명령어로 설치한다.

npm install --save connect-history-api-fallback

 

 

backend/routes/app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
const history = require('connect-history-api-fallback'); //여기
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const session = require('express-session');



var indexRouter = require('./routes/index');

var app = express();


// view engine setup

var views = [
  path.join(__dirname, 'views')
]

app.set('views', views);
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());


app.use('/', indexRouter);
app.use(history()); //여기

app.use(express.static(path.join(__dirname, 'public'))); // 반드시 여기 위에 use 쓸 것!


/*---------후략-----------*/

 

주석 표시한 곳만 보면 되고 주의해야 할 점은 static 위에 history를 써야한다는 것이다.

 

처음에 안 되길래 구글링해보니 static이 위에 있어서 안됐던 거였다.

 

 

 

++다음날 확인해보니 / 페이지가 백엔드 페이지로 출력되는 것을 확인하고 프론트엔드 페이지로 나오도록 추가 작성 했다.

 

backend/routes/index.js

var express = require('express');
var path = require('path'); //추가된 부분
var router = express.Router();
router.use(express.urlencoded({extended:true}));
router.use(express.json())
var User = require('./mongodbuser');


/* GET home page. */
router.get('/', function(req, res, next) {
  res.sendFile(path.join(__dirname, '../public', 'index.html')); // 수정된 부분
});

/* 후략 */

 

 

 

 

닫는 글

---

 

이젠 서브페이지 새로고침, url 창에서 주소 입력해도 잘 이동한다.

 

이제 세션으로 로그인/로그아웃 구현만 남았다.