Nextjs 如何解决 cors 问题？

在使用 Next.js 开发应用程序时，跨源资源共享（CORS）是一个常见的问题，因为浏览器出于安全考虑限制了跨域 HTTP 请求。Next.js 可以通过几种方式来解决 CORS 跨域问题：

1. 后端代理

Next.js 支持创建 API 路由，这意味着我们可以在 Next.js 应用程序中创建一个代理路由，将请求从前端发送到这个代理路由，然后由这个路由将请求转发到目标服务器。这种方式可以避免直接从前端向目标服务器发送跨域请求。例如：

jsx
// pages/api/proxy.js
export default async (req, res) => {
  const { query } = req;
  // 目标服务器的URL
  const targetUrl = 'https://example.com/api/data';

  try {
    const apiResponse = await fetch(targetUrl, {
      headers: {
        // 设置必要的头信息
        'Content-Type': 'application/json',
        // 如有需要，这里可以添加认证等其他头信息
      },
    });

    const data = await apiResponse.json();
    res.status(200).json(data);
  } catch (error) {
    res.status(500).json({ message: 'Error fetching data' });
  }
};

2. 配置CORS策略

如果你控制着目标服务器，你可以在服务器上设置 CORS 策略以允许来自你的 Next.js 应用程序的请求。这通常涉及到在服务器的响应头中设置 Access-Control-Allow-Origin 和其他相关的 CORS 头。例如，如果你的服务器是用 Express.js 构建的，你可以使用 cors 中间件来简化这个过程：

javascript
// 在你的 Express 应用中
const cors = require('cors');

app.use(cors({
  origin: 'https://your-nextjs-app.com' // 允许你的 Next.js 应用域名的请求
}));

3. 使用第三方服务

如果无法控制服务器的 CORS 策略，并且你需要某种快速的解决方案，你也可以利用一些第三方的服务或代理，例如 https://cors-anywhere.herokuapp.com/，这些服务可以作为代理转发你的请求，并附加正确的 CORS 头信息。但是，这应该只作为临时解决方案，因为它可能引入额外的延迟，并且可能不安全。

4. Next.js 中间件（Next.js 12+ 版本）

从 Next.js 12 开始，Next.js 引入了中间件功能，这允许你在请求到达页面或 API 路由之前执行服务器端代码。你可以在中间件中添加 CORS 头，从而处理跨域请求：

jsx
// pages/_middleware.js
import { NextResponse } from 'next/server';

export function middleware(req) {
  const res = NextResponse.next();

  res.headers.set('Access-Control-Allow-Origin', '*');
  res.headers.set('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE,OPTIONS');
  res.headers.set('Access-Control-Allow-Headers', 'Content-Type,Authorization');

  return res;
}

以上是处理 Next.js 应用中 CORS 问题的几种方法。选择哪一种方法取决于你的应用需求、安全性要求以及你是否能控制服务器端。

如果你想使用 cors中的库 nextjs，可以考虑使用nextjs-cors。

https://www.npmjs.com/nextjs-cors

https://github.com/yonycalsin/nextjs-cors

页面/api/whoami.{ts,js}

shell
import NextCors from 'nextjs-cors';

async function handler(req, res) {
   // Run the cors middleware
   // nextjs-cors uses the cors package, so we invite you to check the documentation https://github.com/expressjs/cors
   await NextCors(req, res, {
      // Options
      methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
      origin: '*',
      optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
   });

   // Rest of the API logic
   res.json({ message: 'Hello NextJs Cors!' });
}