如何使用快速路由器对相对路径进行 axios 调用？

Question

我正在学习 MERN 堆栈并创建典型的初学者“Todo”应用程序。当我进行诸如axios.post("http://localhost:4000/todos/add", newTodo) 之类的axios 调用时，它可以正常发布，但是当我尝试axios.post("/todos/add", newTodo) 时却不行。

这个调用显然只能在本地工作 - 我该如何解决这个问题/我做错了什么？

这是位于/routes/api 文件夹中的todos.js 文件：

const todoRouter = require("express").Router();
let Todo = require('../../models/todo');

todoRouter.route("/").get(function (req,res){
    Todo.find(function(err, todos){
        if (err){
            console.log (err)
        } else {
            res.json(todos)
        }
    });
});

todoRouter.route("/:id").get(function(req,res){
    let id = req.params.id
    Todo.findById(id, function(err,todo){
        if (err) {
            console.log(err)
        } else {
            res.json(todo)
        }
    });
});

todoRouter.route("/add").post(function(req,res){
    let todo = new Todo(req.body)
    todo.save()
        .then(function (todo){
            res.status(200).json({"todo": "todo added successfully"})
        })
        .catch(function (err){
            res.status(400).json("adding new todo failed")
        })
})

todoRouter.route('/update/:id').post(function(req, res) {
    Todo.findById(req.params.id, function(err, todo) {
        if (!todo)
            res.status(404).send("data is not found");
        else
            todo.todo_description = req.body.todo_description;
            todo.todo_responsible = req.body.todo_responsible;
            todo.todo_priority = req.body.todo_priority;
            todo.todo_completed = req.body.todo_completed;

            todo.save().then(todo => {
                res.json('Todo updated!');
            })
            .catch(err => {
                res.status(400).send("Update not possible");
            });
    });
});
module.exports = todoRouter;

这是我位于/routes/api 文件夹中的index.js：

const router = require("express").Router();
const todoRoutes = require("./todos");

// Todo routes
router.use("/todos", todoRoutes);

module.exports = router;

这是位于/routes 文件夹中的index.js：

const path = require("path");
const router = require("express").Router();
const todoRoutes = require("./api");

// API Routes
router.use(todoRoutes);

// If no API routes are hit, send the React app
router.use(function(req, res) {
  res.sendFile(path.join(__dirname, "../client/build/index.html"));
});

module.exports = router;

这是我的server.js 文件：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose')
const PORT = process.env.PORT || 4000;
const routes = require('./routes')


// Define middleware here
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(bodyParser.json());

// Serve up static assets (usually on heroku)
if (process.env.NODE_ENV === "production") {
    app.use(express.static("client/build"));
}
// Define API Routes
app.use(routes)

// Send every other request to the React app
// Define any API routes before this runs
app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "./client/build/index.html"));
});

//Connect to mongoose

mongoose.connect(process.env.MONGODB_URI || "mongodb://127.0.0.1:27017/todos", { useNewUrlParser: true });
const connection = mongoose.connection
connection.once("open", function () {
    console.log("MongoDB database connection established successfully")
})



app.listen(PORT, function () {
    console.log("Server is running on Port: " + PORT);
});

Answer 1

只需在您的 package.json 中设置 "proxy": "http://localhost:4000" 属性，您的所有 /something 请求将被定向到您的后端，而无需指定基本 url

Answer 2

您可以将 axios 的 baseUrl 设置为 http://localhost:4000，然后相对路径应该可以工作。 https://github.com/axios/axios#creating-an-instance