[react + node.js] GET http://localhost:3000/ 404 (Not Found) 에러 시 확인해야 할 것

계속 화면에

CAN NOT GET: 뭐 이런식으로 떴었다.

 

브라우저 console창을 확인하니

GET http://localhost:3000/ 404 (Not Found) 이런 에러가 떠있더라

 

서버가 문제인지 프론트엔드가 문제인지 한참 찾아봤는데

우연찮게 해답을 찾았다.

 

참고:  stackoverflow.com/questions/44524424/get-http-localhost3000-404-not-found

GET http://localhost:3000/ 404 (Not Found)

---

stackoverflow 에서 발췌...

http://localhost:3000/ 처리 경로가 없는 경우 정적 파일 핸들러만 있는 경우 이 URL이 작동할 수 있음 http://localhost:3000/index.message http://localhost:3000/에서 웹에 액세스하려면 다음 항목을 추가하십시오.

app.get('/', function(req, res){
    res.sendFile(__dirname+'/bin/index.html'); // change the path to your index.html
});

사실 뭔말인지 이해못했는데 눈치껏 localhost:port 뒤에 요청하는 경로가 없다면, 그리고 그 요청 경로로 응답해주는 반환 페이지가 없다면 이런 에러가 뜬다고하는 것 같다.

 

 

실제로 server.js부분(node.js의 app.js인데 이름 변경함...)에는 경로가 /api로 시작하는 애들만 받아주는 코드만 있었던 것

const apiRoute = require('./routes/apiRoute');

app.use('/api', apiRoute);

이런식으로!!

---

그래서 node.js 서버단의 server.js에 코드 추가

 

servers>server.js (=app.js)

app.use('/', (req, res) => {
    res.json({username:'유저 명'});
});

그랬더니 화면에 react페이지가 아니라

저 json형식으로 보내준게 그대로 뜨네?? 참놔,,,,

 

react의 리액트의 App.js에서도 경로를 '/' 이거 그대로 해놨는데도 왜구뤠;;;

 

왜일까 또 한참 찾아봤더니 proxy의 와일드카드 설정 문제였다....

src>setupProxy.js

module.exports = function (app){
    app.use(
        createProxyMiddleware('**', {
            target: 'http://localhost:3001',
            changeOrigin: true
        })
    )
};

proxy 경로를 '/api' 말고도 여러개를 주고싶어서 와일드카드인 '**'를 해놨더니 애가 정신을 못차리는 것 같더라...

그래서 다시 원래대로 바꿈...

만약에 react proxy설정 시 '/api' 외에도 여러가지 경로를 주고 싶다면? 아래 글 참고!

xively.tistory.com/20

[react proxy] react proxy 여러 개 설정하기, createProxyMiddleware에서 경로 여러 개 설정, react 파일형식 pro

원래 코딩은 삽질하면서 지식이 늘어가는 거라고 긍정적으로 생각하기로 했다.

이만 나의 2시간 삭제를 기념하며...

---

+) 2021-09-24 나의 근본적인 해결 방법

https://xively.tistory.com/55

[React + Node] React 새로 고침 시 Cannot GET/POST 버그 드디어 수정하다...