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

Question

我有一个项目，在前端使用Next.js ，在后端使用Express.js 。

前端“页面”文件包含“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的文章，但是我几天仍然没有找到解决方案。

Answer 1

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