Простые звонки MERN Axios не работают (и никогда) не работали для меня. Последовательная ошибка 404. Возможно из-за структуры файла - PullRequest
Новая
       26

Простые звонки MERN Axios не работают (и никогда) не работали для меня. Последовательная ошибка 404. Возможно из-за структуры файла

0 голосов
/ 12 октября 2019

Мне сказали, что Axios - это то, как вы заставляете React общаться с API (внешним или внутренним). До сих пор я получал только 404 ошибки, когда пытался реализовать вызовы Axios.

Вот вызов axios в client/src/App.js: 

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;

Теперь он вызывает API.js в папке «utils»: 

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». Этот файл является единственным элементом в папке. 

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, а вызов axios в API.js вызывает точно такой же маршрут, который был бы получен при переходе на маршрут /api, затем маршрут /recipes в пределах /api (в результате /api/recipes).

Если кто-нибудь здесь может сказать мне, что происходит и как это исправить, я был бы признателен.

1 Ответ

0 голосов
/ 12 октября 2019

У меня не было «прокси», установленного в моих зависимостях (package.json) в папке client.

Как только я установил «прокси» в «localhost: 3001» (так же, как мойпервоначальное server.js значение порта) и перезапустил сервер, он сразу заработал.

...