Azure静态Web应用无法连接Supabase，登录报错AuthRetryableFetchError

排查与解决方案 #

1. 验证环境变量的完整性与格式 #

• 检查Azure端的NEXT_PUBLIC_SUPABASE_URL（或对应变量名）：确保无前后空格、引号，URL格式严格为https://<your-project-id>.supabase.co，复制时避免带入多余字符。
• 确认NEXT_PUBLIC_SUPABASE_ANON_KEY与Vercel端使用的完全一致，无截断或额外字符。可在Azure部署脚本中添加打印命令验证实际值：

  echo "Supabase URL: $NEXT_PUBLIC_SUPABASE_URL"
  echo "Supabase Anon Key: $NEXT_PUBLIC_SUPABASE_ANON_KEY"
  

2. 检查Supabase客户端初始化代码 #

确保客户端初始化时严格区分URL和密钥参数，避免拼接错误导致URL格式异常：

// 正确写法
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  import.meta.env.NEXT_PUBLIC_SUPABASE_URL,
  import.meta.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

避免出现将密钥混入URL的错误写法，这类错误会直接触发URL is not valid or contains user credentials报错。

3. 清空Azure部署缓存 #

Azure静态Web应用可能残留旧部署缓存，导致环境变量未正确更新：

• 登录Azure门户，进入目标静态Web应用的部署中心，点击清空缓存，随后重新触发部署。
• 或在部署yml脚本中添加缓存清理步骤：

  steps:
    - name: Clean cache
      run: npm cache clean --force
  

4. 确认Azure环境变量注入方式 #

• 如果使用Azure App Service配置而非部署yml硬编码变量，检查变量是否在配置->应用程序设置中正确保存，未被自动转义（比如特殊字符被错误处理）。
• 若通过yml注入变量，确保变量引用格式正确，无语法错误，例如：

  env:
    NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
    NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.SUPABASE_ANON_KEY }}
  

5. 验证Supabase CORS配置 #

确认Azure应用的域名已添加至Supabase控制台的CORS允许列表：

• 进入Supabase项目设置->API->CORS配置，添加Azure应用的完整域名（如https://your-app-name.azurestaticapps.net）。
• 若存在本地测试需求，同时添加http://localhost:3000等本地地址。

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