Angular 2 令牌:预检响应具有无效的 HTTP 状态代码 400

问题描述

我有一个运行 Visual Studio Code 的 Angular2/TypeScript 应用程序.

I have an Angular2/TypeScript application running i Visual Studio Code.

在 VS 2015 中运行的 API.这是 API 项目:http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

An API running in VS 2015. This is the API project: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

我可以使用 API 并创建新用户，但是当我尝试登录(使用令牌功能)时，出现以下错误:XMLHttpRequest 无法加载 https://localhost:44305/Token.预检响应具有无效的 HTTP 状态代码 400

I can use the API and create new users, but when I try to login(Use the Token function), then I get the following error:XMLHttpRequest cannot load https://localhost:44305/Token. Response for preflight has invalid HTTP status code 400

标题如下所示:

Request URL:https://localhost:44305/Token
Request Method:OPTIONS
Status Code:400
Remote Address:[::1]:44305
Response Headers
cache-control:no-cache
content-length:34
content-type:application/json;charset=UTF-8
date:Wed, 10 Aug 2016 19:12:57 GMT
expires:-1
pragma:no-cache
server:Microsoft-IIS/10.0
status:400
x-powered-by:ASP.NET
x-sourcefiles:=?UTF-8?B?QzpcQ2hlY2tvdXRcQVBJXzJ2czJcQVBJXEFQSVxUb2tlbg==?=
Request Headers
:authority:localhost:44305
:method:OPTIONS
:path:/Token
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, sdch, br
accept-language:en-US,en;q=0.8,da;q=0.6,nb;q=0.4
access-control-request-headers:authorization
access-control-request-method:POST
cache-control:no-cache
origin:http://evil.com/
pragma:no-cache
referer:http://localhost:3000/signin
user-agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

我的 Angular 服务如下所示:

My angular service looks like this:

 loginAccount(account: Account): Observable<string> {
    var obj = { Email: account.Email, Password: account.Password, grant_type: 'password' };
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions( {method: RequestMethod.Post, headers: headers });

        let body = JSON.stringify(obj);
        console.log('loginAccount with:' + body);

         return this._http.post('https://localhost:44305/Token',  body, options)
                             .map(this.extractData)
                             .catch(this.handleError);
}

当我在 API 项目中使用 AJAX 函数时:http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api 那么它工作正常吗??我在 Angular POST 请求中做错了什么?

When I use the AJAX funtions that a in the API project: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api then it works fine ?? What am I doing wrong in the Angular POST request ?

推荐答案

我找到了解决方案.感谢 API 站点上的评论:http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

I found the solution. Thanks to the comments on the API site: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

我必须为 application/x-www-form-urlencoded 设置正确的标题；charset=UTF-8 并序列化我发布的对象.我找不到 Angular 序列化器方法，所以我在 JavaScript 中制作了自己的(从另一个 stackoverflow 站点复制).

I had to set the correct header for application/x-www-form-urlencoded; charset=UTF-8 and serialize the object i posted. I can´t find an Angular serializer method, so I made my own(copy from another stackoverflow site) in JavaScript.

这是在使用 Angular2 & 时用户登录 API 并请求令牌时的最终调用.打字稿:

Here is the final call when the user login on the API and request a token, when using Angular2 & TypeScript:

 loginAccount(account: Account): Observable<string> {
    var obj = { UserName: account.Email, Password: account.Password, grant_type: 'password' };

        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' });
        let options = new RequestOptions( {method: RequestMethod.Post, headers: headers });

        let body = this.serializeObj(obj);

         return this._http.post('https://localhost:44305/Token',  body, options)
                             .map(this.extractData)
                             .catch(this.handleError);
}

private serializeObj(obj) {
    var result = [];
    for (var property in obj)
        result.push(encodeURIComponent(property) + "=" + encodeURIComponent(obj[property]));

    return result.join("&");
}

这篇关于Angular 2 令牌:预检响应具有无效的 HTTP 状态代码 400的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！