Vercel预览域名是否忽略next.config.js？API路由401问题求助

首先明确：401是服务端返回的授权验证失败，并非跨源资源共享（CORS）问题——CORS错误会在浏览器控制台明确提示跨源相关信息，不会返回401状态码。针对你的情况，按以下步骤排查：

• 检查预览分支的环境变量是否生效
  确认Vercel中develop分支的环境变量已正确配置：

  1. 进入Vercel项目→「Settings」→「Environment Variables」
  2. 筛选分支为develop，确认所需的授权相关变量（如密钥、令牌等）已添加，且变量的「Environment」设置为「Preview」或「All」
  3. 若刚修改过变量，手动触发develop分支的重新部署，确保变量被加载到预览环境中

• 验证Next.js的CORS配置是否覆盖预览环境
  检查next.config.js中的CORS配置是否被条件判断限制了生效范围，比如是否仅在生产环境开启：

  // 错误示例：若错误判断分支/环境会导致预览环境无CORS配置
  module.exports = {
    async headers() {
      if (process.env.VERCEL_ENV === 'production') {
        return [/* CORS headers */];
      }
      return [];
    },
  };
  

  确保CORS配置没有被分支或环境条件限制，开放API的话直接返回允许任意来源的headers即可。

• 排查API路由中的授权逻辑
  检查API路由文件（pages/api/xxx.js或app/api/xxx/route.js）中的代码：

  1. 是否存在基于请求host的判断，比如仅允许myapp.com而拒绝dev.myapp.com？
  2. 是否依赖了未在预览环境配置的授权密钥/令牌？
  3. 是否有变量名拼写错误等逻辑问题导致授权验证失败？

• 检查Vercel预览部署的安全设置
  若开启了预览部署密码保护，API请求会被拦截返回401：
  进入Vercel项目→「Settings」→「Preview Deployments」，查看是否启用了「Password Protection」，如果是开放API，直接关闭该选项即可。

• 强制重新部署预览分支
  即使配置正确，旧的预览部署可能未加载最新配置，在Vercel的「Deployments」页面找到develop分支的预览部署，点击「Redeploy」确保最新代码和配置生效。

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