Next.js和Express.js給出CORS錯誤，API查詢僅在構建時有效

我有一個專案，我在前端使用Next.js ，在后端使用Express.js。

前端 'pages' 檔案包含 'index.js'。在其中，我發送以下請求。

    import Home from "./home/home";
import axios from "axios";

import { useState } from "react";
export default function Index({ data }) {
  const [products, setProducts] = useState(data);
  const [start, setStart] = useState(1);

  const getMoreProducts = async () => {
    setStart(start   1);
    const { newProducts } = await axios.get(
      `${process.env.NEXT_PUBLIC_BACK_END}/test`
    );

    setProducts([...products, ...newProducts]);
  };

  return (
    <div>
      <Home data={products} />
      <button onClick={getMoreProducts}> Load more {start}</button>
    </div>
  );
}

export async function getServerSideProps(context) {
  // Fetch data from external API
  const { data } = await axios.get(
    `${process.env.NEXT_PUBLIC_BACK_END}/productlist/pagination`,
    {
      params: {
        page: 1,
        limit: 5,
      },
    }
  );

  return {
    props: {
      data: data || {},
    },
  };

  // Pass data to the page via props
}

后端側

const express = require("express");
var cors = require('cors')




const app = express();
require("dotenv").config();
const mongoose = require("mongoose");

mongoose.connect(
  "*********",
  { useNewUrlParser: true }
);
const db = mongoose.connection;

db.on("error", (err) => console.error(err));
db.once("open", () => console.log("Connected to Database "));

app.use(express.json());
const productlistRouter = require("./routes/productlist");
const test = require("./routes/test");

app.use("/productlist", productlistRouter);
app.use("/test", test);
app.use(cors())
app.listen(3000, () => console.log("Server is running"));

這是我的路線代碼：

const express = require("express");
const router = express.Router();
const Product = require("../models/product");
const cors = require("cors");

const corsOptions = {
  headers: [
    { key: "Access-Control-Allow-Credentials", value: "true" },
    { key: "Access-Control-Allow-Origin", value: "*" },
    // ...
  ],
  origin: "*",
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};
router.get("/showall", async (req, res) => {
  try {
    const product = await Product.find();
    res.json(product);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

router.get("/pagination", cors(corsOptions), async (req, res) => {
  const page = req.query.page;
  const limit = req.query.limit;
  const startIndex = (page - 1) * limit;
  const endIndex = page * limit;
  const products = await Product.find();
  const result = products.slice(startIndex, endIndex);
  res.json(result);
});

因此，當頁面首次使用Next.js構建時，api可以作業，但是當我單擊“加載更多”按鈕時，它會出現CORS錯誤。當我對“郵遞員”和其他工具使用相同的查詢時，它不會給出任何錯誤。在Next.js方面，當我向另一個 3rd 方 API 發送查詢時它可以作業。但是當我將它發送到我自己的后端時它不起作用。而且無論我在哪個頁面或組件中執行此操作，只有在構建時創建的 API 才能正常作業。

這可能是什么原因？我該如何解決？我已經閱讀并搜索了一些關于 cors 的文章，但我仍然沒有找到解決方案。

uj5u.com熱心網友回復：

CORS 應該放在頂層，因為 javascript 是逐行執行的。放app.use(cors())在線的正上方app.use("/productlist", productlistRouter);

標籤：javascript 节点.js 表示 下一个.js 科尔斯

上一篇：如何在Nextjs中將組件匯入為按鈕？

下一篇：將新的鍵值對映射到物件陣列中