GEThttp://localhost:3000/hello404（未找到）

我正在關注實施 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%",
 ...

uj5u.com熱心網友回復：

好的，我拿走了你的代碼，第一個問題是你的請求被發送到http://localhost:3001/hello- 這意味著它將占用你前端的埠（假設你想分別運行 FE 和 BE，例如埠 3000 和 3001）

在我修復axios.get('/hello')后axios.get('http://localhost:3000/hello')，我們進入第二個問題。我收到 CORS 問題。

為了解決這個問題，我們必須cors在我們的快速后端進行配置-

第三個問題是 - 你沒有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>
     );
   }
 }

標籤：节点.js 反应 表达

上一篇：如果請求成功，則獲取發布請求不記錄成功

下一篇：如果未提供憑據，如何使用express-basic-auth以便我的應用程式回傳401？