Azure Static Web Apps CLI调试Blazor+Azure Functions API本地问题求助

核心问题分析 #

你的报错'<‘ is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.'确实是因为API请求返回了HTML页面（通常是404错误页或服务未响应提示），说明Azure Static Web Apps (SWA) CLI没有正确将API请求转发到本地Azure Functions服务。三种启动方式失败的根源多为HTTPS证书信任冲突、服务未完全启动或端口配置不匹配。

分步解决方案 #

1. 先验证本地服务可用性 #

启动Blazor客户端和Azure Functions服务，确保各自独立运行正常：

• 启动Blazor客户端（使用HTTP端口，如http://localhost:5000），访问确认页面加载正常
• 启动Azure Functions服务（使用HTTP端口，如http://localhost:7071），访问http://localhost:7071/api/weather-forecast/5确认返回正确的JSON数据

2. 正确启动SWA CLI #

方式一：直接指定HTTP端口启动

在两个服务都运行的前提下，执行以下命令：

swa start http://localhost:5000 --api-location http://localhost:7071

访问http://localhost:4280即可通过SWA CLI访问Blazor客户端并转发API请求。

方式二：修改swa-cli.config.json配置

如果使用swa init生成了配置文件，编辑文件将所有HTTPS地址替换为HTTP：

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "default": {
      "appLocation": ".",
      "apiLocation": "http://localhost:7071",
      "outputLocation": "wwwroot",
      "devserver": {
        "url": "http://localhost:5000"
      }
    }
  }
}

保存后执行swa start启动服务。

3. 配置断点调试 #

• Blazor客户端断点：直接在Visual Studio中设置断点，将调试目标URL改为http://localhost:4280，启动调试后触发API调用即可命中。
• Azure Functions断点：在Visual Studio中选择「附加到进程」，找到func.exe进程并附加，触发API请求时即可命中Functions中的断点。

HTTP替代HTTPS的影响说明 #

本地调试使用HTTP是安全可行的，不会影响生产部署（生产环境SWA默认强制HTTPS），仅需注意两点：

• 如果Blazor项目中配置了UseHttpsRedirection()，需在开发环境中禁用：

  if (!app.Environment.IsDevelopment())
  {
      app.UseHttpsRedirection();
  }
  

• HTTP避免了本地HTTPS证书信任问题，这也是你之前使用HTTPS端口启动失败的主要原因之一。

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