Question

有人告诉我Axios是让React与api（外部或内部）对话的方式。到目前为止，无论何时尝试实现Axios调用，我都只收到404错误。

这是client/src/App.js中的axios呼叫：

import React, {Component} from 'react';
import './App.css';
import API from "./utils/API";

class App extends Component {

  state = {
    recipes: []
  }

  componentDidMount = () => {
    API.getRecipes("milk") /* This is supposed to call the getRecipes 
                              function in API.js with "milk" as the only 
                              parameter (ie - Search the api for "milk" 
                              related recipes). */

    .then(res => this.setState({recipes: res.data}))
    .catch(err => console.log(err));
  }

  render(){
  return (
    <div>
      {
        this.state.recipes.map(recipe => {
          return(
            <p>
              {recipe.title} // All recipe names are then set to a p tag
            </p>
          )
        })
      }
    </div>
  );
  }
}

export default App;

现在，这将调用“ utils”文件夹中的API.js：

import axios from "axios";

// Function that takes the parameter and is supposed to send it to the 
   /api/recipes route

export default {
  getRecipes: function(query) { 

    return axios.get("/api/recipes", { params: { q: query } });

  }
};

相关的api路由（/api/recipes）位于“ src”文件夹之外的名为“ routes”的文件夹中。该文件是文件夹中唯一的项目。

const axios = require("axios");
const router = require("express").Router();

/* As you can see, this sends the request to "recipepuppy.com" with the 
   relevant query ("milk").*/

router.get("/recipes", (req, res) => {
    axios.get("http://www.recipepuppy.com/api/", {params: req.query})
    .then(({data: {results}}) => {res.json(results)})
    .catch(err => res.status(422).json(err));
});

module.exports = router;

更进一步，这里是server.js文件（位于“ client”文件夹之外），用于确定路由：

const express = require("express");
const path = require("path");

const PORT = process.env.PORT || 3001;
const app = express();
const apiRoutes = require("./routes/apiRoutes"); // *********

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

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

app.use("/api", apiRoutes); // *********

app.get("*", function(req, res) {
  res.sendFile(path.join(__dirname, "./client/build/index.html"));
});

app.listen(PORT, function() {
  console.log(`API server now listening on port ${PORT}.`);
});

据我所知，一切都设置得很完美。但是，每次我启动服务器时，浏览器控制台错误都会弹出并显示：

GET http://localhost:3000/api/recipes?q=milk 404 (Not Found)

即使server.js直接链接到apiRoutes文件夹，并且API.js中的axios调用也调用了与进入/api路由所产生的完全相同的路由，然后在/recipes内进行/api路由（导致/api/recipes）。

如果这里的任何人都可以告诉我发生了什么事以及如何解决它，我将不胜感激。

Answer 1

我在package.json文件夹的依赖项（client）中没有设置“代理”。

一旦我将“ proxy”设置为“ localhost：3001”（与我的初始server.js端口值相同）并重新启动服务器，它就可以立即工作。

简单的MERN Axios呼叫对我没有（而且从来没有）起作用。一致的404错误。可能由于文件结构

1 个答案: