部署在Azure Blob Storage的Vite-Vue页面请求出现404响应如何解决

你在vite.config.js里配置的server.proxy只在本地开发服务器（npm run dev）中生效，部署到Azure Blob Storage后，静态网站没有代理服务能力，前端发起的/api请求会直接指向Blob Storage的域名，而非你目标的Azure Websites地址，这就导致了无授权的404错误。

方案1：前端直接使用完整API地址（最简单） #

• 把代码中所有/api开头的请求替换成目标API的完整URL，比如原来的fetch('/api/user')改成fetch('https://wo****i.azurewebsites.net/user')
• 用环境变量统一管理（推荐，避免硬编码）：
  1. 在项目根目录新建.env.production文件，内容：

     VITE_API_BASE_URL=https://wo****i.azurewebsites.net
     

  2. 前端代码中通过import.meta.env.VITE_API_BASE_URL获取地址，示例：

     const apiUrl = import.meta.env.VITE_API_BASE_URL
     fetch(`${apiUrl}/user`)
     

  注意：Vite要求客户端可访问的环境变量必须以VITE_为前缀。

方案2：用Azure CDN/Front Door做代理（无需修改前端代码） #

如果不想改动前端代码，可以给Blob Storage的静态网站配置Azure CDN，然后添加URL重写规则：

1. 给你的Blob静态网站创建Azure CDN端点
2. 在CDN的“规则引擎”中添加一条规则：
   • 匹配条件：路径匹配/api/*
   • 操作：URL重写，目标地址设为https://wo****i.azurewebsites.net/{1}（{1}表示匹配到的/api/后面的内容）
   • 开启“转发所有请求头”，确保跨域、授权等信息正常传递

方案3：SPA路由补充配置（若存在页面刷新404） #

如果你的Vue应用是单页应用（SPA），部署后刷新页面也会出现404，需要在Blob静态网站设置中，将index.html同时设为索引文档和错误文档，让所有路由请求都指向入口文件。

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