Блог

Я пытаюсь выполнить вызов axios внутри перехватчика useEffect, но все, что возвращается, — это файл html.index. Я понимаю, что express будет направлять любые вызовы в «/» на index.html но у меня установлены определенные маршруты и другие меры предосторожности, поэтому я не знаю, почему это происходит…

Компонент React:

 import React, { Fragment, useState, useEffect } from "react";
//uuid for card element key
import { v4 as uuidv4 } from "uuid";
import API from "../utils/API";
//dummy data
import books from "../dummy.json";
//import components
import Card from "../components/Card";
import Searchbar from "../components/Searchbar";
const Bookshelf = () => {
  useEffect(() => {
    loadBooks()
  });
  const loadBooks = () => {
    API.getAllBooks().then(res => console.log(res))
  }
  const [bookArray, setBookArray] = useState({
    books,
  });
  return (
    <Fragment>
      <div className="bookshelf">
        <Searchbar />
        <div className="bookshelf__heading__container">
          <h2 className="bookshelf__heading">
            Release the Kraken of Knowledge!
          </h2>
        </div>
        <div className="bookshelf__container">
          <section className="bookshelf__gallery">
            {bookArray.books.map((book) => (
              <Card
                key={uuidv4()}
                title={book.title}
                author={book.author}
                image={book.image}
              />
            ))}
          </section>
        </div>
      </div>
    </Fragment>
  );
};
export default Bookshelf;
  

Мой экспресс-сервер:

 const express = require("express");
const PORT = process.env.PORT || 3306;
const app = express();
const { sequelize } = require("./models");
const authors = require("./routes/authors");
const books = require("./routes/books");
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/authors", authors);
app.use("/api/books", books);
app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "../client/build/index.html"));
});
sequelize.sync().then(() => {
  app.listen(PORT, () => {
    console.log(listening on ${PORT});
  });
});

  

Вызов Axios:

 import axios from "axios";
export default {
  getAllBooks: function(){
    return axios.get("/api/books/all");
  }
};
  

Мои маршруты:

 const express = require("express");
const router = express.Router();
const { Op, json } = require("sequelize");
const { Author, Book } = require("../models");
//POST new book:
router.post("/add_book", (req, res) => {
  Book.create(req.body)
    .then((book) => {
      res.status(200).json({ book });
    })
    .catch((err) => {
      res.status(500).send(err);
    });
});
//PUT edit book by id:
router.put("/edit/:id", (req, res) => {
  Book.update(req.body, {
    where: {
      id: req.params.id,
    },
  })
    .then((numChanged) => {
      res.status(200).json({ changedRows: numChanged[0] });
    })
    .catch((err) => {
      res.status(500).send(err);
    });
});
//GET all books;
router.get("/all", (req, res) => {
  Book.findAll({
    include: [Author],
  })
    .then((books) => {
      res.status(200).json(books);
      return json(books)
    })
    .catch((err) => {
      res.status(500).send(err);
    });
});
//GET books by title:
router.get("/title/:title", (req, res) => {
  Book.findOne({
    where: {
      title: req.params.title,
    },
    include: [Author],
  })
    .then((books) => {
      res.status(200).json(books);
    })
    .catch((err) => {
      res.status(500).send(err);
    });
});
//GET books by title OR author:
router.get("/search/:search_term", (req, res) => {
  Book.findAll({
    include: [Author],
    where: {
      [Op.or]: [
        { title: { [Op.substring]: req.params.search_term } },
        { "$Author.firstName$": { [Op.substring]: req.params.search_term } },
        { "$Author.lastName$": { [Op.substring]: req.params.search_term } },
      ],
    },
  })
    .then((result) => {
      res.status(200).json(result);
    })
    .catch((err) => {
      res.status(500).send(err);
    });
});
//DELETE book by id:
router.delete("/book_id/:id", (req, res) => {
  Book.destroy({
    where: {
      id: req.params.id,
    },
  })
    .then((wasDeleted) => {
      res.status(200).json({ deleted: wasDeleted !== 0 });
    })
    .catch((err) => {
      res.status(500).send(err);
    });
});
module.exports = router;

  

У меня также настроен прокси-сервер, и, насколько я могу судить, это работает, но, возможно, это может быть как-то связано…
Пожалуйста, дайте мне знать, что еще я могу предоставить, чтобы помочь разобраться в этом, это загоняет меня в тупик.

РЕДАКТИРОВАТЬ: итак, если я сделаю вызов и включу http://localhost:8080/etc это работает. Это говорит мне, что (вероятно) проблема с тем, что прокси-сервер не работает или express не находит его вообще…