Express 使用 Axios 获取错误 URL

Question

我正在使用 MERN 堆栈制作 tinder 克隆。

我的 server.js 在 localhost:8001 并且前端在 localhost:3000 我正在使用 MongoDB 将值存储在 tinder 卡中。

这是我的 axios.js 代码：

import axios from "axios";

const instance = axios.create({
  baseUrl: "http://localhost:8001",
});

export default instance;

server.js:

import express from "express";
import mongoose from "mongoose";
import Cors from "cors";
import Cards from "./dbCards.js";

//App Config
const app = express();
const port = process.env.PORT || 8001;
const connection_url = `<MongoDB URL>`;

//Middlewares
app.use(express.json());
app.use(Cors());

//DB Config
mongoose.connect(connection_url, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

//API Endpoints
app.get("/", (req, res) => res.status(200).send("Hi"));

app.post("/tinder/cards", (req, res) => {
  const dbCard = req.body;
  Cards.create(dbCard, (err, data) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(201).send(data);
    }
  });
});

app.get("/tinder/cards", (req, res) => {
  Cards.find((err, data) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(200).send(data);
    }
  });
});

//Listner
app.listen(port, () => console.log(`Listening on localhost: ${port}`));

TinderCards.js:

import React, { useEffect, useState } from "react";
import "./TinderCards.css";
import TinderCard from "react-tinder-card";
import axios from "./axios";

function TinderCards() {
  const [people, setPeople] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const req = await axios.get("/tinder/cards");

      setPeople(req.data);
    }
    fetchData();
  }, []);

  console.log(people);

  const swiped = (direction, nameToDelete) => {
    console.log("removing " + nameToDelete);
  };

  const outOfFrame = (name) => {
    console.log(name + " left the screen!");
  };

  return (
    <div className="tinderCards">
      <div className="tinderCards__cardContainer">
        {people.map((person) => (
          <TinderCard
            className="swipe"
            key={person.name}
            preventSwipe={["up", "down"]}
            onSwipe={(dir) => swiped(dir, person.name)}
            onCardLeftScreen={() => outOfFrame(person.name)}
          >
            <div
              style={{ backgroundImage: `url(${person.imgUrl})` }}
              className="card"
            >
              <h3>{person.name}</h3>
            </div>
          </TinderCard>
        ))}
      </div>
    </div>
  );
}

export default TinderCards;

问题是 Tinder 卡片不显示图像，在浏览器控制台中我收到卡片图像的 404 错误。

它在 localhost:3000 而不是 localhost:8001 上发送请求我该如何解决？ Axios 的baseUrl 设置为8001 那为什么它发送req 到3000？

Answer 1

好的，明白了，我在 axios.js 中犯了一个语法错误。是 baseURL 而不是 baseUrl。

Express 使用 Axios 获取错误 URL

Express is fetching wrong URL with Axios

node.js

express

reactjs

mern

axios