使用 Next.js 配置接口跨域

在Next.js中配置接口的跨域，可以通过修改next.config.js文件来实现。以下是一个配置示例，它允许从任何来源（通配符）进行跨域资源共享（CORS）：

module.exports = {
  async rewrites() {
    return [
      // 这里可以配置重写规则，如果不需要可以省略
    ];
  },
  async headers() {
    return [
      {
        source: '/api/:path*', // 匹配所有 /api 路径的请求
        headers: [
          { key: 'Access-Control-Allow-Origin', value: '*' }, // 允许跨域的源
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,OPTIONS' }, // 允许的HTTP方法
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' }, // 允许的HTTP请求头
        ],
      },
    ];
  },
};

在这个配置中，通过headers方法，我们为路径为/api的所有路径配置了跨域头。这里使用了通配符*作为允许的origin，实际使用时可以根据需要将*替换为特定的域名。

请注意，使用通配符*会将安全性降至最低，因为它允许任何网站对您的API发起请求。在实际部署时，应该只允许必要的域，以保护您的API不被未经授权的访问。