NextJS本地应用请求开发环境Strapi API遭遇CORS跨域问题

方案一：NextJS开发代理配置（无需修改后端） #

这是最省心的解决方式，利用NextJS自带的转发能力绕开浏览器跨域限制：

• 在项目根目录创建或修改next.config.js，添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://dev.our-website.com/api/:path*',
      },
    ];
  },
}

module.exports = nextConfig

• 把本地的请求代码改成和开发环境网站一致的相对路径写法：

fetch('/api/articles', {
  method: 'GET',
  headers: {
    Authorization: 'Bearer bearer token is here',
    'Content-Type': 'application/json',
  },
})

• 原理：本地NextJS开发服务器会把/api开头的请求转发到远程Strapi地址，浏览器只和本地服务器通信，自然不会触发跨域问题。

方案二：修改Strapi的CORS配置（需操作后端权限） #

如果你能修改开发环境的Strapi配置，直接放开localhost的跨域权限：

• 打开Strapi项目的config/middlewares.js（Strapi v4版本路径）
• 找到strapi::cors中间件，更新origin字段包含http://localhost:3000：

module.exports = [
  // 其余中间件保持不变
  {
    name: 'strapi::cors',
    config: {
      origin: ['http://localhost:3000', 'https://dev.our-website.com'],
      methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
      headers: ['Content-Type', 'Authorization'],
    },
  },
  // 其余中间件保持不变
]

• 重启Strapi服务后，本地直接请求https://dev.our-website.com/api/articles就能正常运行。

方案三：临时用浏览器插件绕过CORS（仅测试用） #

适合快速验证接口，不推荐长期使用：

• 安装浏览器CORS插件（比如Chrome的CORS Unblock）
• 启用插件后，本地跨域请求就能暂时通过
• 注意：上线前一定要关闭，避免安全风险

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