尝试使用 mongodb mongoose 发出获取请求时，浏览器上出现“无法获取/”错误

Question

我正在构建一个 men-stack 网站。当我尝试发出发布请求以列出所有事件时，我看到“无法发布/事件”错误，当我发出获取请求时，我看到“无法获取/事件”。

当我查看检查时，更详细的错误是“无法加载资源：服务器响应状态为 404（未找到）localhost/:1” 我认为路由器可能有一些问题..

如有任何建议/建议，我们将不胜感激。

我可以成功连接到mongoDB和localhost3000。

我已经完成了前端，如果我不尝试连接到服务器，一切都显示正常。如果我启动服务器，将显示“无法获取/”错误：

当我在失眠状态下测试时，同样的事情发生了：

这是我的服务器文件：

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');

require('dotenv').config();

const app = express();
const port = process.env.PORT || 3000;
 
//middlewear
app.use(cors());
app.use(express.json());

const uri = process.env.ATLAS_URI;
mongoose.connect(uri);
const connection = mongoose.connection;
connection.once('open', () => {
    console.log("MongoDB database connection established successfully");
})


const eventsRouter = require('./routes/events');

app.use('events', eventsRouter);


app.listen(port, () =>{
    console.log(`Server is running on port: ${port}`);
    
});

这是路由器文件，event.js，我在其中进行 API 调用：

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');

require('dotenv').config();

const app = express();
const port = process.env.PORT || 3000;
 
//middlewear
app.use(cors());
app.use(express.json());

const uri = process.env.ATLAS_URI;
mongoose.connect(uri);
const connection = mongoose.connection;
connection.once('open', () => {
    console.log("MongoDB database connection established successfully");
})


const eventsRouter = require('./routes/events');

app.use('events', eventsRouter);


app.listen(port, () =>{
    console.log(`Server is running on port: ${port}`);
    
});

这就是我实现前端路由器的方式：

function App() {
  return (
    <Router>
    <div className="App">
     <NavbarComp/>
        <Routes>
            <Route path = "/" element = {<Home/>} />
            <Route path = "/events" element = {<Events/>} />
            <Route path = "/balloon" element = {<Balloon/>} />
            <Route path = "/flower" element = {<Flower/>} />
            <Route path = "/grabAndGo" element = {<GrabAndGo/>}/>
        </Routes>
    </div>
     <Footer/>
 
    </Router>
  );
}

导航栏：

export default class NavbarComp extends Component {
  render() {
    return (
 
    <div>
        <Navbar expand="lg" className="bg-body-tertiary">
        <Container>
            <Navbar.Brand as = {Link} to = {"/"}>Boston_GG_Events</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
                <Nav.Link as = {Link} to = {"/"}> Home</Nav.Link>
                <Nav.Link as = {Link} to = {"/events"}>Events</Nav.Link>
                <Nav.Link as = {Link} to = {"/balloon"}>Balloon</Nav.Link>
                <Nav.Link as = {Link} to = {"/flower"}>Flower</Nav.Link>
                <Nav.Link as = {Link} to = {"/grabAndGo"}>Grab and Go</Nav.Link>
            </Nav>
            </Navbar.Collapse>
        </Container>
        </Navbar>
    </div>
    

)
  }
}

这就是我构建文件夹目录的方式：

我尝试使用 insomnia 发出 post/get 请求，它应该列出我已经在 mongoDB 中创建的 JSON 文件中的所有事件。

Answer 1

我的问题解决了。我不应该对前端和后端使用相同的端口。