How to resolve nextjs cors issue？

在使用 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 问题的几种方法。选择哪一种方法取决于你的应用需求、安全性要求以及你是否能控制服务器端。

我在这里找到了一个解决方案：

基本上，我只需要在根目录中添加一个 next.config.js 文件并添加以下内容：

shell
// next.config.js
module.exports = {
    async rewrites() {
        return [
          {
            source: '/api/:path*',
            destination: 'https://api.example.com/:path*',
          },
        ]
      },
  };

如果你想使用 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!' });
}

我遇到了类似的问题，我是从这个页面拨打电话的：

页面/page1.js

shell
  export default async function page1() {
       const data = await axios.post('https://www.dominio.com/xxx' , {param: 1}, headers)
}

但解决方案是对“pages/api”目录中的本地 API 文件进行 axios 调用，该本地 API 文件将处理对外部 Web 服务器的请求。这避免了 CORS 问题。

页面/page1.js

shell
export default async function page1() {
        const data = await axios.post('/api/get_page1_data', {param: 1} )
}

页面/api/get_page1_data.js

shell
export default async function handler(req, res) {
try{
   const data = await axios.post('https://www.dominio.com/xxx' , {param: req.body.param}, headers)
    res.status(200).json(data)
 } catch (error) {
    console.error(error)
    return res.status(error.status || 500).end(error.message)
  }

这是服务器不接受 OPTIONS 请求的问题，因为路由被声明为 GET::something 或 POST::something，所以预检无法通过并且 POST 请求被拒绝，希望这将帮助其他人避免几个小时谷歌搜索，所以在我的例子中（Node.js + Express.js）我必须将其添加到我的 server.js 中

shell
  app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header(
      "Access-Control-Allow-Headers",
      "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );
  if (req.method == "OPTIONS") {
    res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
    return res.status(200).json({});
  }

  next();
});

额外检查一下您的基本网址是否正确，这是我的问题