如何通过端点将Azure静态Web应用前端连接到Azure应用服务后端

定位后端服务正确访问URL #

• 进入Azure门户对应应用服务实例的概览页，Essentials信息块中标注的默认域名就是服务的对外访问根地址，格式固定为https://<应用服务创建时自定义的名称>.azurewebsites.net
• 地址拼接规则和本地调试完全一致：比如本地GET请求地址为http://localhost:8080/api/user/list可正常返回，部署后对应的接口地址就是https://<你的应用服务名>.azurewebsites.net/api/user/list
• 注意不要在域名后追加本地调试用的8080端口，Azure应用服务对外默认走HTTPS 443端口，额外加端口会直接连接失败
• 先用Postman测试拼接完成的接口地址，确认能正常返回预期结果，再进行后续连通配置。如果访问根域名直接报服务不可用，优先去应用服务日志流面板排查Spring Boot启动报错，最常见的问题是硬编码服务端口：在application配置里把端口改成读取平台注入的环境变量即可，配置示例：

server:
  port: ${PORT:8080}

该配置本地启动时无PORT环境变量默认走8080，部署到Azure会自动适配平台分配的端口，不会出现启动失败问题。

前后端连通配置步骤 #

• 配置跨域规则：进入应用服务的CORS设置页，把Azure静态Web应用的访问域名添加到允许源列表，不要使用通配符*（带凭证的请求会被浏览器直接拦截），配置完成后保存。如果项目内已经通过@CrossOrigin注解或WebMvc配置类写了跨域规则，要保证两边允许源配置一致，避免冲突
• 前端代码中将后端接口根地址抽为全局配置项，本地开发环境指向本地后端地址，线上生产环境指向刚才拿到的Azure应用服务根地址，不要硬编码在每个接口请求里
• 如果后续给静态Web应用绑定了自定义域名，记得同步把新的自定义域名加到后端CORS允许源列表中

校验小技巧：配置完成后可以先在浏览器F12控制台直接写fetch请求测试连通性，示例代码：

fetch("https://<你的后端域名>/api/test")
  .then(res => res.text())
  .then(console.log)

控制台正常打印接口返回内容就说明连通配置成功。

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