कोणीय 2 टोकन: प्रीफलाइट के लिए प्रतिक्रिया में अवैध HTTP स्थिति कोड 400

Question

मेरे पास एक विजुअल स्टूडियो कोड चल रहा एक कोणीय 2/टाइपस्क्रिप्ट एप्लिकेशन है।

वी.एस. 2015 में एक एपीआई चल रहा यह API परियोजना है: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

मैं एपीआई का उपयोग और नए उपयोगकर्ताओं को बना सकते हैं, लेकिन जब मैं प्रवेश करने की कोशिश (टोकन फ़ंक्शन का उपयोग करें), तो मैं निम्नलिखित मिल त्रुटि: XMLHttpRequest https://localhost:44305/Token लोड नहीं कर सकता है। preflight के लिए प्रतिक्रिया अमान्य 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 

मेरे कोणीय सेवा इस तरह दिखता है:

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 के कार्यप्रणाली की सहायता का उपयोग एपीआई परियोजना: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api तो यह ठीक काम करता है ?? कोणीय POST अनुरोध में मैं क्या गलत कर रहा हूं?

Answer 1

मुझे समाधान मिला। एपीआई साइट पर टिप्पणियों के लिए धन्यवाद: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api

मुझे एप्लिकेशन/एक्स-www-form-urlencoded के लिए सही शीर्षलेख सेट करना पड़ा; charset = UTF-8 और मेरे द्वारा पोस्ट की गई वस्तु को क्रमबद्ध करें। मुझे एक कोणीय धारावाहिक विधि नहीं मिल रही है, इसलिए मैंने जावास्क्रिप्ट में अपनी खुद की (एक और स्टैक ओवरफ्लो साइट से कॉपी) बनाई है।

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("&"); 
} 

Answer 2

मैंने पाया कोणीय 4 में आप इस तरह यह करना है:

यहाँ अंतिम कॉल जब एपीआई पर उपयोगकर्ता लॉगिन और एक टोकन का अनुरोध, जब Angular2 & टाइपप्रति का उपयोग कर रहा है।

public addQuestion(data: any): Observable<Response> { 

    let headersObj = new Headers(); 
    headersObj.set('Content-Type', 'application/x-www-form-urlencoded'); 

    let requestArg: RequestOptionsArgs = { headers: headersObj, method: "POST" }; 

    var params = new URLSearchParams(); 
    for(let key of Object.keys(data)){ 
     params.set(key,data[key]); 
    }; 

    return this.http.post(BaseApi.endpoint + 'Question', params.toString(), requestArg) 
    .map((res: Response) => res.json().data); 

    }