NextJS本地环境请求自建API被CORS拦截的配置问题咨询

你遇到的是前端跨域资源共享限制，开发环境下可以通过以下两种方式解决：

方案1：配置Next.js开发代理（无需修改后端） #

这是开发环境最常用的临时解决方案，通过Next.js自带的路由重写功能，把前端请求转发到后端API，规避跨域限制：

1. 在项目根目录找到next.config.js文件，没有就新建一个，添加以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        // 匹配所有前端请求的/api开头的路径
        source: '/api/:path*',
        // 替换成你自行开发的API的实际地址前缀
        destination: 'http://你的后端API地址/:path*',
      },
    ]
  },
}

module.exports = nextConfig

2. 修改你前端的请求代码，把原来直接请求后端地址的部分，改成请求/api/xxx的相对路径即可，配置完成后重启开发服务生效。

方案2：在自行开发的API服务端添加CORS头 #

如果你有权限修改后端API的配置，可以直接在服务端的响应头添加跨域许可，开发环境下可以直接允许Next.js默认的本地服务地址：

• 如果你用的是Express开发后端，可以直接引入cors中间件，示例：

const cors = require('cors')
const app = express()
// 开发环境允许localhost:3000的请求
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true // 如果需要携带cookie等身份凭证就加这个配置
}))

• 其他后端框架也可以参照对应文档，给响应头添加Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers三个必填的CORS头即可。

你当前的请求代码参考如下：

生产环境注意事项 #

开发环境的代理配置仅适用于本地调试，生产环境建议使用两种方案：

• 后端API配置正式的CORS规则，只允许你的应用域名请求
• 用Next.js的API路由做请求中转，前端请求同域的Next.js API路由，再由Next.js服务端请求你的后端API，服务端请求不存在CORS限制。

内容的提问来源于stack exchange，提问作者aangar0514