واجهة برمجة التطبيقات - أنغولار 2 الرمز المميز: الاستجابة للفحص المسبق تحتوي على رمز حالة HTTP غير صالح 400

لدي تطبيق Angular2/TypeScript يعمل في Visual Studio Code.

واجهة برمجة التطبيقات تعمل في VS 2015. هذا هو مشروع واجهة برمجة التطبيقات: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

يمكنني استخدام واجهة برمجة التطبيقات وإنشاء مستخدمين جدد، لكن عندما أحاول تسجيل الدخول (استخدام وظيفة الرمز)، أحصل على الخطأ التالي: لا يمكن لـ XMLHttpRequest تحميل https://localhost:44305/Token. الاستجابة للتحقق المسبق لها رمز حالة HTTP غير صالح 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 هكذا:

 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);
}

عندما أستخدم دوال AJAX الموجودة في مشروع API: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api فإنها تعمل بشكل جيد؟؟ ما الخطأ الذي أفعله في طلب POST في Angular؟

الإجابة رقم 1

وجدت الحل. شكراً للتعليقات على موقع API: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

كان عليّ تعيين العنوان الصحيح لـ application/x-www-form-urlencoded; charset=UTF-8 وتسلسل الكائن الذي قمت بإرساله. لا أستطيع العثور على طريقة تسلسل في Angular، لذلك صنعت طريقتي الخاصة (نسخة من موقع Stack Overflow آخر) في JavaScript.

إليك النداء النهائي عندما يقوم المستخدم بتسجيل الدخول على واجهة برمجة التطبيقات ويطلب رمزًا، عند استخدام 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("&");
}

الإجابة رقم 2

كنت أواجه نفس المشكلة منذ الأسبوع الماضي وبحثت على جوجل وستاك أوفرفلو ولكن جميع الحلول لم تفد. ولكن بعد الكثير من القراءة والتحقيق وجدنا الحل التالي، كنا نواجه المشكلة فقط في طريقة POST، أما GET فتم استدعاؤها بنجاح.

بدلاً من تمرير الخيارات مباشرة، نحتاج أولاً إلى تحويل كائن الخيار إلى سلسلة مثل JSON.stringify(options)

CreateUser(user:IUser): Observable<void> {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        return this._http.post('http://localhost:22736/api/Employee/Create', **JSON.stringify(options)**)
            .map((res: Response) => {
                return res.json();
            })
            .catch(this.handleError);
    }

لقد نجح معي، آمل أن يساعد الآخرين أيضًا.