Azure静态Web应用能否以Azure App Service作为后端实现文件下载？

安全阿岳

2026-7-17

Azure静态Web应用与Azure App Service的后端通信方案

完全可以。Azure静态Web应用支持将外部Azure App Service作为后端API进行通信，能够满足你通过静态Web应用让用户下载App Service生成文件的需求，具体实现方式如下：

配置路由转发规则
在静态Web应用的staticwebapp.config.json文件中添加路由配置，将指定路径的请求转发到你的App Service接口。示例配置如下：
```
{
  "routes": [
    {
      "route": "/api/download/*",
      "backend": {
        "url": "https://yourappservice.azurewebsites.net/api/generate-file"
      }
    }
  ]
}
```
配置完成后，用户访问静态Web应用的/api/download路径时，请求会自动转发到App Service对应的文件生成接口。
解决跨域访问问题
确保你的Azure App Service配置了正确的CORS规则，允许静态Web应用的域名发起请求。在App Service门户的CORS设置中，添加静态Web应用的完整域名（例如https://your-static-app.azurestaticapps.net），测试阶段可临时设置为*（生产环境不推荐）。

前端实现文件下载逻辑
在静态Web应用的前端代码中，直接调用配置好的转发路径即可触发文件下载。示例JavaScript代码：

document.getElementById('downloadBtn').addEventListener('click', async () => {
  const response = await fetch('/api/download', { method: 'GET' });
  const blob = await response.blob();
  const url = window.URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = 'generated-document.pdf'; // 替换为实际文件名
  document.body.appendChild(downloadLink);
  downloadLink.click();
  window.URL.revokeObjectURL(url);
  document.body.removeChild(downloadLink);
});