React静态Web应用（SWA）对接Azure函数应用时出现400错误及API安全配置问题排查求助

大家好，我最近在做React静态Web应用（SWA）和Azure函数应用的集成，遇到了API安全配置相关的400错误，折腾了好久没头绪，来求助各位大佬！

问题概述 #

我做了一个React应用，集成了Google OAuth认证，通过Axios调用Azure函数的API。在把SWA和函数应用关联之前，函数在Azure的Code + Test页面里是能正常运行的；关联之后，本来期望能拦截未授权的API访问，结果调用API时直接返回400错误，提示“Login not supported for provider azureStaticWebApps”。

Azure门户里的关联配置如下：

具体错误信息 #

Firefox控制台错误（Axios返回） #

message: "Request failed with status code 400", name: "AxiosError", code: "ERR_BAD_REQUEST", config: {…}, request: XMLHttpRequest, response: {…}, status: 400 } code: "ERR_BAD_REQUEST"

网络请求返回的错误内容 #

{"code":400,"message":"Login not supported for provider azureStaticWebApps"}

我的开发与集成细节 #

1. React应用端实现 #

React应用集成了Google OAuth，获取到Token后通过Axios调用API，请求时在Header里带上了Authorization: Bearer {token}：

async function getItems( formattedDate, category,  personal, token) {
  try {
      const response = await instance
    .get("/api/register/find", {
          headers: { 'Authorization': bearer(token) },
          params: {        
            incidentDate: formattedDate,
            category: category,
            personal: personal
          },
        });
          return response;
        }
        catch (error) {
          console.log(error);
        };
    }

function bearer(token) {
  return `Bearer ${token}`;
}

2. Azure函数应用端实现 #

用Java写的函数，目前发现最基础的日志都打不出来（比如context.getLogger().info("Processing /register/find endpoint");），怀疑请求根本没到达函数服务：

@FunctionName("findRegister")
public HttpResponseMessage find(
        @HttpTrigger(name = "req", methods = {HttpMethod.GET}, route = "register/find") HttpRequestMessage<Optional<String>> request,
        final ExecutionContext context) {
    context.getLogger().info("Processing /register/find endpoint");
    final String query = request.getQueryParameters().get("incidentDate");
    final String incidentDate = request.getBody().orElse(query);
    var itemDto = new ItemDto(…);//dummy output
    var response = new ArrayList<ItemDto>();
    response.add(itemDto);
    try {
        String jsonResponse = mapper.writeValueAsString(response);
        return request.createResponseBuilder(HttpStatus.OK)
                .header("Content-Type", "application/json")
                .body(jsonResponse)
                .build();
    } catch (JsonProcessingException e) {
        context.getLogger().severe("Error creating Items : " + e.getMessage());
        return request.createResponseBuilder(HttpStatus.INTERNAL_SERVER_ERROR)
                .body("Error Fetching response")
                .build();
    }
}

关联SWA之后，我在Code + Test页面里也不知道怎么正常测试函数了，页面状态如下：

我目前的疑问与排查求助 #

1. 这个400错误的根因是什么？是我请求中携带的Google Token不被SWA+函数的集成模式认可？还是SWA的安全配置和函数的认证方式冲突了？
2. 为什么函数的日志完全打不出来？是不是请求在到达函数之前就被SWA的网关拦截了？
3. 我查资料提到staticwebapp.config.json是用来配置SWA的核心文件，但我的项目里没有这个文件，是不是必须要创建？项目里现有的azure-static-web-apps-icy-dune-09764cf03.yml能不能替代它的作用？
4. 有没有更有效的排查手段？比如远程调试函数，或者绕开SWA直接测试函数的可用性？
5. React应用端还有哪些配置需要检查？比如Axios实例的基础URL配置、Token的传递逻辑有没有问题？

麻烦各位大佬帮忙分析下，谢谢啦！

备注：内容来源于stack exchange，提问作者Kris Swat