Next.js 和 Express.js 给出 CORS 错误，API 查询仅在构建时有效

Question

我有一个项目，我在前端使用 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 有效，但是当我单击 'Load more' 按钮，出现 CORS 错误。当我将相同的查询与 'postman' 和其他工具一起使用时，它不会给出任何错误。在 Next.js 方面，当我向另一个第三方 API 发送查询时它有效，但当我将它发送给我自己时它不起作用后端。而且无论我在哪个页面或组件中执行此操作，只有在构建时创建的 APIs 才有效。

这可能是什么原因？我该如何解决？看了好几篇关于cors的文章，找了好几天了，还是没找到解决办法。

Answer 1

CORS 应该放在顶层，因为 javascript 是一行一行执行的。将 app.use(cors()) 放在 app.use("/productlist", productlistRouter);

行的正上方

Next.js 和 Express.js 给出 CORS 错误，API 查询仅在构建时有效

Next.js and Express.js give CORS error, API queries only work at build time

javascript

node.js

cors

express

next.js