GET请求错误404（未找到）使用axios

Question

我的 nextjs pizzashop 应用程序有问题。 当我在我的计算机上运行该应用程序时，出现此错误：

页面刷新后错误消失。

这是我的`index.js`

import axios from "axios";
import Head from "next/head";
import { useState } from "react";
import Add from "../components/Add";
import AddButton from "../components/AddButton";
import Featured from "../components/Featured";
import PizzaList from "../components/PizzaList";
import styles from "../styles/Home.module.css";

export default function Home({ pizzaList }) {
  const [close, setClose] = useState(true);
  return (
    <div className={styles.container}>
      <Head>
        <title>Pizza Restaurant in New york</title>
        <meta name="description" content="Best pizza shop in town" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Featured />
      {<AddButton setClose={setClose} style={{ display: "none" }} />}
      <PizzaList pizzaList={pizzaList} />
      {!close && <Add setClose={setClose} />}
    </div>
  );
}

export const getServerSideProps = async (ctx) => {
  const myCookie = ctx.req?.cookies || "";
  let admin = false;

  if (myCookie.token === process.env.TOKEN) {
    admin = true;
  }

  const res = await axios.get("http://localhost:3000/api/products");
  return {
    props: {
      pizzaList: res.data,
      admin,
    },
  };
};

当我将应用程序上传到 Vercel 时，出现此错误：

这是我在 vercel 服务器运行时遇到的错误

这是我的 /api/products/[id].js 文件代码

import dbConnect from "../../../util/mongo";
import Product from "../../../models/Product";

export default async function handler(req, res) {
  const {
    method,
    query: { id },
    cookies,
  } = req;
  const token = cookies.token;

  await dbConnect();

  if (method === "GET") {
    try {
      const product = await Product.findById(id);
      res.status(200).json(product);
    } catch (err) {
      console.log(err.response);
      res.status(500).json(err);
    }
  }

  if (method === "PUT") {
    if (!token || token !== process.env.token) {
      return res.status(401).json("Not authenticated!");
    }
    try {
      const product = await Product.findByIdAndUpdate(id, req.body, {
        new: true,
      });
      res.status(200).json(product);
    } catch (err) {
      console.log(err.response);
      res.status(500).json(err);
    }
  }

  if (method === "DELETE") {
    if (!token || token !== process.env.token) {
      return res.status(401).json("Not authenticated!");
    }
    try {
      await Product.findByIdAndDelete(id);
      res.status(200).json("The product has been deleted!");
    } catch (err) {
      console.log(err.response);
      res.status(500).json(err);
    }
  }
}

这是我的 /api/products/index.js 文件代码

import dbConnect from "../../../util/mongo";
import Product from "../../../models/Product";

export default async function handler(req, res) {
  const { method, cookies } = req;

  const token = cookies.token;

  await dbConnect();

  if (method === "GET") {
    try {
      const products = await Product.find();
      res.status(200).json(products);
    } catch (err) {
      console.log(err.response);
      res.status(500).json(err);
    }
  }

  if (method === "POST") {
    if (!token || token !== process.env.token) {
      return res.status(401).json("Not authenticated!");
    }
    try {
      const product = await Product.create(req.body);
      res.status(201).json(product);
    } catch (err) {
      console.log(err.response);
      res.status(500).json(err);
    }
  }
}

我怀疑错误来自我的获取请求，但我无法诊断原因。 有人知道吗？

Answer 1

我假设服务器端应用程序可以设置为单独的部署。 在这种情况下，您可以简单地按照类似于此处给出的内容进行操作： https://vercel.com/guides/handling-node-request-body

您可以使用部署 url 作为服务器端代码，而不是向http://localhost:3000/api/products发送请求，例如http://some-deployment-url/api/products来访问您需要的数据。

GET请求错误404（未找到）使用axios

问题描述

这是我的`index.js`

这是我在 vercel 服务器运行时遇到的错误

这是我的 /api/products/[id].js 文件代码

这是我的 /api/products/index.js 文件代码

1 个解决方案

解决方案1
0 2023-01-09 17:45:45

GET请求错误404（未找到）使用axios

问题描述

这是我的index.js

这是我在 vercel 服务器运行时遇到的错误

这是我的 /api/products/[id].js 文件代码

这是我的 /api/products/index.js 文件代码

1 个解决方案

解决方案1 0 2023-01-09 17:45:45

这是我的`index.js`

解决方案1
0 2023-01-09 17:45:45