Question

我目前正在修改客户端应用程序以使用Axios.js而不是Fetch.js HTTP请求。现在，当我进行此切换时，我的WebAPI消息处理程序中似乎出现了异常行为。

我有一个自定义的APIKeyHandler，它继承了DelegatingHandler。
我已经在应用程序启动中设置了APIKeyHandler，因为我希望对API的所有请求都通过此APIKeyHandler。

当我使用Axios库调用我的API端点时，请求进入APIKeyHandler，但是当到达调用base.SendAsync的行时，它不等待响应，而是立即执行下一行。使用Fetch，VS Code Rest Client，Postman对API进行调用时，我没有遇到这种现象。我已经比较了进入处理程序的HttpRequestMessage，并且在不同的调用方之间它是相同的。

我不确定发出Axios请求时是否有配置设置，或者我在消息处理程序中做错了什么。

public class APIKeyHandler : DelegatingHandler
  {
      protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
      {
          bool isValidAPIKey = false;
          IEnumerable<string> lsHeaders;

          var checkApiKeyExists = request.Headers.TryGetValues("client_api_key", out lsHeaders);
          if (checkApiKeyExists)
          { //check here the database for the correct combination
              ApiKey clsApiKey = new ApiKey();
              ApiKeyModel aModel;
              aModel = clsApiKey.GetByApiKeyValue(lsHeaders.FirstOrDefault());
              if (aModel.Id > 0)
              {
                  isValidAPIKey = true;
              }
              else
              {
                  isValidAPIKey = false;
              }

          }

          //If the key is not valid, return an http status code.
          if (!isValidAPIKey)
              return request.CreateResponse(HttpStatusCode.NotFound);

          //Allow the request to process further down the pipeline

          var response = await base.SendAsync(request, cancellationToken);

          //Return the response back up the chain
          return response;
      }

  }

使用Axios的客户端

function AxiosTest(axiosparams) {

    return axios({
        method: 'get',
        url: axiosparams.URL,
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Accept': 'application/json',
            'client_api_key': clientApiKey
        },
        crossDomain: true, 
        responseType: 'json' 
    }).then(function (response) {
        return response;
    }).catch(function (error) {
        return error;
    });
}

使用提取的客户端

function FetchData(fetchparams) {

    var options = new Object();
    var myHeader = new Headers();
    myHeader.append('Content-Type', 'application/json; charset=utf-8');
    myHeader.append('Accept', 'application/json');
    myHeader.append('client_api_key', clientApiKey);
    options.method = 'get';
    options.headers = myHeader;

    return fetch(fetchparams.url, options)
        .then(JSONResponse)
        .then(function (data) {
           return data;
        })
        .catch(function (error) {
            return error;
        });
    }
}

添加浏览器的网络输出 Network Tab Screen Capture

Answer 1

在您的Axios请求中添加data: {}。

如果您不提供Content-Type属性，则可以在GitHub上的issue中看到Axios删除了data。

有一个很大的变化，它将解决您的问题（我不知道您的应用程序中还具有其他哪些过滤器/设置）。

通过Axios.js库调用API端点时，MessageHandler无法正确执行

1 个答案: