Question

我正在尝试将我的 MERN 应用程序部署到 Heroku，但我的 API 在第一页后失败。

我收到这样的错误：“GET https://roommers.herokuapp.com/complaints 404（未找到）”

这是我现在拥有的一些代码

反应

const handleSubmit = async e => {
        e.preventDefault();
        if (flipper) {
            setFlipper(false);
        } else {
            setFlipper(true);
        }

        const payload = {
            roomkey: roomKey,
            title: title,
            request: request
        }

        const response = await axios({
            url: 'http://localhost:4000/api/addrequest',
            method: 'post',
            data: payload
        })

        e.target.reset()
        console.log(response);
    }

Server.js

const express = require('express');
const mongoose = require('mongoose');
const path = require('path');
const morgan = require('morgan');
const app = express();
const cors = require('cors');
const userRouter = require('./routes/api.js')

// HTTP request logger
app.use(morgan('tiny'));



mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/propManage', { useNewUrlParser: true, useUnifiedTopology: true })

mongoose.connection.on('connected', () => {
    console.log("DB connected")
})

// port
const PORT = process.env.PORT || 4000

// Parse
app.use(express.json());
app.use(express.urlencoded({ extended: true }))

app.use(cors())
app.use('/api', userRouter)

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'))

}
app.listen(PORT, function (err) {
    if (err) {
        console.log(err);
    } else {
        console.log(`server started on port ${PORT}`)
    }
})

API

userRouter.post('/getcomplaints', async function (req, res) {
    const roomkey = req.body.roomkey
    console.log("roomkey", roomkey)
    console.log(req.body)
    requestModel.find({ roomKey: roomkey }, await function (err, foundRequests) {
        if (err) {
            console.log(err)
        } else {
            console.log(foundRequests)
            res.send({
                token: USER_LOGIN_SUCCESS,
                requests: foundRequests
            })
        }
    })
})

Package.json

{
  "name": "roommatesv4",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cd client && npm run build",
    "install-client": "cd client && npm install",
    "heroku-postbuild": "cd client && npm install && npm run build",
    "start": "node server.js",
    "client": "cd client && npm start",
    "server": "nodemon server.js",
    "dev": "concurrently -n 'server, client' -c 'green, yellow' \"nodemon server.js\" \"npm run client\"",
    "dev2": "concurrently \"npm run server\" \"npm run client\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "axios": "^0.21.1",
    "bcrypt": "^5.0.1",
    "concurrently": "^6.0.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mongoose": "^5.12.0",
    "morgan": "^1.10.0",
    "node-schedule": "^2.0.0",
    "nodemailer": "^6.5.0",
    "react-router-dom": "^5.2.0",
    "react-stripe-checkout": "^2.6.3",
    "react-toastify": "^7.0.4",
    "stripe": "^8.145.0",
    "uuid": "^8.3.2"
  }
}

资料

web: node server.js

App.js

import React, { useState } from 'react'
import axios from 'axios'

import { BrowserRouter, Route, Switch, Link, Redirect } from "react-router-dom"
// Pages
import registrationScreen from "./pages/registration.jsx"
import homePage from "./pages/home.jsx"
import Errpage from "./pages/errpage.jsx"
import LoginPage from "./pages/login.jsx"
import Dashboard from "./pages/dashboard.jsx"
import EnterRoomKey from "./pages/pageafterregister.jsx"
import ChoresTDL from "./pages/chores.jsx"
import Complaints from "./pages/complaints.jsx"
import PayRent from "./pages/payment.jsx"
import Addroom from "./pages/addroom.jsx"




function App() {
  <head>

  </head>
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={homePage} />
        <Route exact path="/register" component={registrationScreen} />
        <Route exact path="/login" component={LoginPage} />
        <Route exact path="/dashboard" component={Dashboard} />
        <Route exact path="/roomKeyPage" component={EnterRoomKey} />
        <Route exact path="/chores" component={ChoresTDL} />
        <Route exact path="/complaints" component={Complaints} />
        <Route exact path="/payrent" component={PayRent} />
        <Route exact path="/addroom" component={Addroom} />

        <Route component={Errpage} />
        <Redirect to="/404" />
      </Switch>
    </BrowserRouter>
  )
}

export default App;

我一直在努力解决这个问题。该应用程序似乎将用户保存在本地存储中并按预期运行，直到我尝试访问仪表板之外的任何内容。任何帮助将不胜感激。

Heroku REST API 不工作，但在本地工作

0 个答案: