Azure Static Web App + Gatsby调用第三方API报405错误求助

问题概述 #

将Gatsby应用部署到Azure Static Web App后，调用第三方外部API时返回405状态码。对比本地运行与Azure服务环境的请求头，发现存在明显差异：

本地环境请求头 #

Azure Static Web App环境请求头 #

补充背景信息 #

• 本地环境变量存储在.env文件中；Azure端最初将环境变量存入GitHub Secrets，并在Actions工作流的env段引用
• 另有一个同配置的API可正常工作，但该API是构建时调用，出现问题的API为运行时调用
• 已尝试将运行时环境变量配置到Azure应用设置中，问题仍未解决

排查方向与解决方案建议 #

1. 核对请求方法一致性
   405错误的核心原因是请求方法不被目标API允许。仔细对比本地和Azure环境的请求头，确认是否存在请求方法不一致的情况（比如本地用POST，Azure端因代理或CORS预请求变成OPTIONS）。Azure Static Web App的默认配置可能会对请求方法产生影响，需重点排查。

2. 解决CORS预请求问题
   运行时浏览器发起跨域请求时，会先发送OPTIONS预请求。如果第三方API未正确响应OPTIONS请求（比如未返回允许的方法、Origin等头），会导致后续实际请求被拦截。本地环境可能因浏览器同源策略豁免或本地开发服务器的CORS配置绕过了这一限制，而Azure生产环境触发了严格的校验。

• 可通过Azure Static Web App的staticwebapp.config.json配置全局CORS规则：

  {
    "globalHeaders": {
      "Access-Control-Allow-Origin": "https://your-thirdparty-api-domain.com",
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization"
    }
  }
  

3. 确保运行时环境变量生效
   Gatsby在生产环境中，只有以GATSBY_开头的环境变量才能被运行时代码读取。检查Azure应用设置中的环境变量名称是否符合该规则（比如GATSBY_API_ENDPOINT而非API_ENDPOINT），并通过浏览器控制台打印变量值，确认应用已正确读取。

4. 配置Azure代理转发请求
   如果第三方API不支持CORS，可通过Azure Static Web App的路由配置设置代理，将前端请求转发到第三方API，避免跨域问题：
   在staticwebapp.config.json中添加路由规则：

{
  "routes": [
    {
      "route": "/proxy-api/*",
      "rewrite": "https://your-thirdparty-api-domain.com/{*}",
      "allowedMethods": ["GET", "POST"]
    }
  ]
}

前端代码中调用/proxy-api/xxx即可，由Azure负责转发请求到第三方API。

5. 检查第三方API的访问限制
   部分第三方API会验证请求来源的IP地址或Referer头。Azure Static Web App的出口IP可能不在第三方API的白名单中，需联系API服务商添加Azure的IP段；同时检查请求头中的Referer是否符合API的要求，必要时通过staticwebapp.config.json添加自定义Referer头。

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