Question

我有一个针对WebApi项目的angularjs HTML客户端。当我通过POSTMAN或其他REST客户端测试API时，似乎一切正常。

当我开始使用带有angularjs客户端的浏览器时，浏览器总是使用OPTIONS启动预检请求。在那里，我的WebAPI总是回答400 Bad Request - 我仍处于“/ api / token”阶段。

我已经将我的WebAPI项目的每一点都附加到调试器上。根据SO中关于如何启用CORS的几个答案，我也改变了几点。其中一些我已经尝试过：更改web.config以添加标头，在每个请求上启用cors，向WebApi启动添加cors，在“/ token”覆盖函数中启用cors。

这是我得到的：

Angularjs TypeScript调用“/ api / token”：

logIn = (userName: string, userPassword: string): ng.IPromise<void> => {
    var postData = {
        "grant_type": "password",
        "client_id": this.appConfiguration.ClientId,
        "client_secret": this.appConfiguration.ClientSecret,
        "username": userName,
        "password": userPassword
    };
    return this.$http.post<models.LoggedUserModel>('http://local.web.api/api/token', $.param(postData), {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then((result) => {
        this.localStorageService.set('Auth', result);
        this.goHome(true);
    }).catch((error) => {
        console.warn(error);
    });
}

这是我在WebApi上调用的唯一函数：

  public override async Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)
  {
      // handle cors requests
      if (!string.IsNullOrEmpty(context.OwinContext.Request.Headers.Get("Origin")))
      {
          context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new string[] { "*" });
      }
      try
      {
          // retrieve clientId and clientSecret from request body
          string clientId;
          string clientSecret;
          if (context.TryGetFormCredentials(out clientId, out clientSecret))
          {
              // here it comes our application specific security code....
          }
          else
          {
              // this is part of enabling CORS..
              if (context.Request.Method.ToUpper() == "OPTIONS")
              {
                  // it returns OK to preflight requests having an empty body
                  context.Validated();
              }
          }
      }
      finally
      {
          // log stuff...
      }
  }

如果我刚离开OWIN Cors的东西，添加标题并调用'context.Validated（）'，它们都会继续相同。这是我得到的：

Firefox Network Tab:
--------------------
Request URL: http://local.web.api/api/token
Request method: OPTIONS
Remote address: 127.0.0.1:80
Status code: 400 Bad Request
Version: HTTP/1.1

Request headers:
----------------
Host: local.web.api
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.7,pt-BR;q=0.3
Accept-Encoding: gzip, deflate
DNT: 1
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization
Origin: http://local.web.client
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

Response headers:
-----------------
Access-Control-Allow-Origin: *
Cache-Control: no-cache
Content-Length: 34
Content-Type: application/json;charset=UTF-8
Date: Tue, 22 Dec 2015 15:24:23 GMT
Expires: -1
Pragma: no-cache
Server: Microsoft-IIS/10.0
X-Powered-By: ASP.NET

我真的很感激有什么想法。这对我来说是全新的，我也会运行其他一些WebApi项目+ angularjs。

Answer 1

好的，那很糟糕但我发现了这个问题。我在angularjs上使用一个http拦截器，它会自动检查已记录的用户，并在需要时添加Authorization标头和Bearer标记。问题是我做错了。

我在config对象中创建了一个新属性，bypassToken作为布尔值，这将是添加或不添加Authorization标头的标志。删除它实际上修复了代码。不知道为什么，但现在分析请求我可以看到所有标头实际上都按预期发送：Content-Type没有正确地填充第一个案例。虽然没有警告被angularjs抛出，但很奇怪。

// http auth interceptor
angularApplication.factory('httpAuthInterceptor', ['$rootScope', '$injector', '$location', ($rootScope, $injector, $location): ng.IHttpInterceptor => {

    var $q: ng.IQService = $injector.get('$q');
    var localStorageService: ng.local.storage.ILocalStorageService = $injector.get('localStorageService');

    return {
        request: (config: ng.IRequestConfig): ng.IRequestConfig => {
            // check if headers are present
            config.headers = config.headers || {};

            // the error was here! I was trying to add properties to config that I think angular was not expecting
            // removing this line solved the issue
            // if (!config.bypassToken) {

            // check if user is logged in
            var loggedUserInfo = localStorageService.get<models.LoggedUserInfoModel>('Auth');
            if (loggedUserInfo) {
                config.headers['Authorization'] = 'Bearer ' + loggedUserInfo.access_token;
            }
            return config;
        },
        responseError: (rejection)  => {
            // check if user is logged in
            var loggedUserInfo = localStorageService.get<models.LoggedUserInfoModel>('Auth');
            if ((rejection.status === 401) && (loggedUserInfo)) {

                // if so, then the user must login againd
                localStorageService.remove('Auth');
                $location.path('/home');
                console.error(rejection);
            }
            return $q.reject(rejection);
        }
    };
}]);

感谢您的帮助。我只是在这里张贴这个以防万一有人面临类似的问题。不要弄乱config对象！

ASP.NET WebApi回答400错误请求ValidateClientAuthentication上的选项，甚至在context.Validated（）上

1 个答案: