时间戳

首页 > 解决方案 > GET http://localhost:3000/hello 404（未找到）

node.js - GET http://localhost:3000/hello 404（未找到）

问题描述

我正在关注实施 MERN 的教程，但我遇到了以下错误： GET http://localhost:3000/hello 404 (Not Found)我做的一切都是正确的，但我无法解决这个问题。以下是我的文件，任何人都可以形成社区帮助，以便我继续前进。我真的很感谢你的帮助。谢谢你们。

前端文件夹：App.js

import React, { Component} from 'react' ;
// import logo from './logo.svg';
import './App.css';
import axios from 'axios' ;

class App extends Component {
   state = {
     hello: null
   }

  componentDidMount() {
      axios.get('/hello')
      .then( res => this.setState({ hello: res.data }))
      .catch( err => console.log(err) )
  
  }

  render() {
     return (
        <div>
          {this.state.hello
            ? <div> {this.state.hello} </div>
            : null }
        </div>
      );
  }
}

export default App;

后端文件夹：App.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');


//import the 'routes' file
var indexRouter = require('./routes')


var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


// use indexRouter
app.use('/', indexRouter);

module.exports = app;

路线

var express = require('express');

var router = express.Router()  

router.get('/hello', function(req, res) {
    res.json('hello world') ;
})

// this is exported to app.js in the Server folder
module.exports =  router ;

前端文件夹：package.json

...
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "proxy": "http://localhost:5000", <==== pointing to localhost
  "browserslist": {
    "production": [
      ">0.2%",
 ...

标签： node.jsreactjsexpress

解决方案

好的，我拿了你的代码，第一个问题是你的请求被发送到http://localhost:3001/hello- 这意味着它将占用你的前端端口（假设你想分别运行 FE 和 BE，例如端口 3000 和 3001）在此处输入图像描述

在我修复axios.get('/hello')后axios.get('http://localhost:3000/hello')，我们进入第二个问题。我得到 CORS 问题。在此处输入图像描述

为了解决这个问题，我们必须cors在我们的 express 后端进行配置 - https://expressjs.com/en/resources/middleware/cors.html。操作： 如果我们重新运行我们的后端并刷新我们的前端页面，则npm i cors添加Now - 我们得到响应 200 OK。app.use(cors());node index.js在此处输入图像描述

第三个问题是 - 你没有app.listen().app.listen(PORT, () => console.log(`app listening at http://localhost:${PORT}`))

好的，这里是代码。首先，我删除了我认为与这种情况无关的所有额外依赖项。然后在我完成所有工作后，我将它们放回去，但在某些地方我可能会忘记全部归还。我也将您的get路线直接放入index.js- 因此这也与您的代码不同（您将其放在单独的模块中）。正如我所说，我试图让事情变得简单易懂。

BE（我用它运行它node index.js

var express = require('express');
var path = require('path');
var cors = require('cors')
var createError = require('http-errors');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var app = express();
const PORT = 3000;

app.use(cors())
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));
app.use(logger('dev'));
app.use(cookieParser());
 
app.get('/hello', function(req, res) {
    res.send('hello world') ;
})
app.listen(PORT, () => console.log(`app listening at http://localhost:${PORT}`))

module.exports = app;

FE（从它开始npm start- 它是 create-react-app - 端口 3001，因为后端在端口 3000 上运行）

export  class App extends React.Component {
  state = {
    hello: null
  }
 componentDidMount() {
     axios.get('http://localhost:3000/hello')
     .then( res => this.setState({ hello: res.data }))
     .catch( err => console.log(err) )
 
 }
 render() {
    return (
       <div>
         {this.state.hello
           ? <div> {this.state.hello} </div>
           : null }
       </div>
     );
   }
 }

推荐阅读