Azure Web App与Static Web App混合内容错误排查咨询

• 检查前端请求的URL协议
  直接查看前端发起API请求的代码，确认请求地址的协议是https://而非http://。错误提示里明确显示请求的是http://my-api.azurewebsites.net/v1/user/，大概率是前端代码中硬编码、环境变量配置或URL拼接时使用了HTTP协议。同时注意错误中的URL缺少user_id参数，也要排查前端参数拼接逻辑是否正常。

• 启用Azure Web App的HTTPS强制访问
  登录Azure门户，找到你的FastAPI所在的Web App，进入TLS/SSL设置页面，开启「HTTPS Only」选项。该配置会自动将所有HTTP请求重定向到HTTPS，即使前端误发HTTP请求，也会被Azure自动修正为HTTPS，避免混合内容拦截。

• 验证FastAPI的CORS配置
  确保FastAPI的CORS中间件正确配置，允许静态网站域名访问：

  from fastapi.middleware.cors import CORSMiddleware
  
  app.add_middleware(
      CORSMiddleware,
      allow_origins=["https://myapp.azurestaticapps.net"],
      allow_methods=["*"],
      allow_headers=["*"],
  )
  

  错误的CORS配置可能导致前端请求异常，间接触发不符合预期的HTTP请求路径。

• 清除缓存并确认部署代码版本

  • 清除浏览器的缓存和Cookie，避免旧的HTTP请求配置被缓存。
  • 检查前端部署到Azure Static Web App的代码是否为最新版本，确保本地开发环境的HTTP配置没有被误部署到生产环境。

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