我以前已经能够将React用于heroku应用程序,并且在heroku上没有React的情况下我已经成功进行了api调用,但是我从未能够将两者混为一谈。甚至没有一次。
api路由在localhost上有效。
我拥有难以置信的基本代码,每当我尝试访问部署到Heroku的api路由之一时,都会产生404错误。以下是我的server.js
文件:
const express = require("express");
const mongoose = require("mongoose");
const PORT = process.env.PORT || 3001;
const path = require("path");
const routes = require("./routes");
const app = express();
let MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/database";
app.use(express.urlencoded({extended:false}));
app.use(express.json());
app.use(express.static("public"));
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
}
mongoose.connect(MONGODB_URI, {useNewUrlParser: true, useUnifiedTopology: true});
mongoose.connection.on("connected", function() {
console.log("~ Connected To Database ~");
});
app.use(routes);
app.get("*", function(req,res) {
res.sendFile(path.join(__dirname, "/client/build", "index.html"));
});
app.listen(PORT, function() {
console.log("App listening in on " + PORT);
});
我的api路由是通过文件结构设置的:
[
routes
(与server.js
位于同一目录中]] >>
index.js
api.js
这里是
index.js
:
const apiRoutes = require("./api.js"); const router = require("express").Router(); router.use("/api", apiRoutes); module.exports = router;
这里是
api.js
:
const router = require("express").Router(); router.get("/users/all", function(req, res) { console.log("Running! The API Route is Being Called!"); res.send("Success"); }); module.exports = router;
这里是启动axios调用的
Base
react组件:
import React, {Component} from "react"; import "./style.css"; import axios from "axios"; class Base extends Component { testAxios = async () => { axios.get("/api/users/all"); } render() { return ( <div> <p>Helloooo</p> <button onClick = {this.testAxios}>Test Axios</button> </div> ) } } export default Base;
最后,这是相关的
package.json
文件:
对于客户端文件夹:
{ "name": "client", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.12.0", "react-dom": "^16.12.0", "react-router-dom": "^5.1.2", "react-scripts": "3.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
对于根文件夹:
{ "name": "garbage", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev", "start:prod": "node server.js", "start:dev": "concurrently \"nodemon --ignore 'client'/*'\" \"npm run client\"", "install": "cd client && npm install", "client": "cd client && npm run start", "build": "cd client && npm run build", "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build" }, "devDependencies": { "concurrently": "^5.0.0", "nodemon": "^1.19.4", "http-server": "^0.11.1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "axios": "^0.19.0", "concurrently": "^5.0.0", "express": "^4.17.1", "mongoose": "^5.7.10", "node": "^12.11.1", "nodemon": "^1.19.3", "react": "^16.10.2", "react-router-dom": "^5.1.2" }, "repository": { "type": "git", "url": "git+https://github.com/garbage/garbage.git" } }
我尝试添加
static.json
文件,但没有成功。如果您有任何想法,请让我知道。
我以前已经能够将React用于heroku应用程序,并且在heroku上没有React的情况下我已经成功进行了api调用,但是我从未能够将两者混为一谈。甚至没有一次。 api路由适用于...
我已经发现问题的根源。在package.json
中,只有一行: