Azure部署的Vite React静态应用Axios请求被加CDN前缀问题排查

核心原因：环境变量未使用绝对路径格式 #

你部署时配置的VITE_API_URL只填了*.azurewebsites.net，没有加上https://前缀，导致浏览器将这个地址识别为相对路径，自动拼接到当前页面的域名（也就是CDN的域名https://app.--.online）后面，最终生成了错误的请求地址。

而本地环境中你配置的是localhost:8000，浏览器默认会补全http://，属于绝对路径，因此不会出现拼接CDN前缀的问题。

解决步骤 #

• 修改Azure中的环境变量配置，给VITE_API_URL加上完整的协议前缀，比如设置为https://xxx.azurewebsites.net（替换xxx为你的实际后端域名）
• 代码中拼接URL的逻辑无需改动，因为完整的绝对路径会直接指向后端服务，不会再与CDN域名拼接

额外排查点 #

如果已经添加协议前缀仍有问题，检查以下内容：

• 检查Axios全局配置，是否误设置baseURL为当前站点域名（比如axios.defaults.baseURL = window.location.origin）
• 检查Azure Static Web Apps的路由规则，是否存在错误的重写或转发规则导致请求路径被修改

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