Wie man Anforderungsheader in angular2 ionic2 Anwendung

Question

setze Ich versuche, Anforderung Header in der http Anfrage in einer ionic2 Anwendung zu setzen. Der Serviceteil des Codes ist

import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 

// model 
import { DataModel } from '../models/data.model'; 

@Injectable() 
export class AuthService { 

    constructor(private _http: Http){} 

    private _url = 'https://sample.com/'; 

    /** 
    * 
    * Request headers to set 
    * Accept  : application/json 
    * Content-Type: application/json 
    * apiKey  : xxx 
    * 
    */ 

    verify(): Observable<DataModel>{ 
     let headers = new Headers() 
     headers.append('Accept', 'application/json'); 
     headers.append('Content-Type', 'application/json'); 
     headers.append('apiKey', 'xxx'); 

     const requestOptions = new RequestOptions({headers: headers}); 

     return this._http.get(this._url, requestOptions).map(data => data.json()); 
    } 
} 

Ist dies der richtige Weg, um Request-Header zu implementieren. Wie, wenn ich auf eine Anwendung versucht, dies war die Antwort

XMLHttpRequest cannot load https://testportal.betterplace.co.in/VishwasAPI/api/public/v2/panVerification/BKCPB8852J. 
Response for preflight has invalid HTTP status code 403 
EXCEPTION: Response with status: 0 for URL: null 

Der Request/Response

/** 
* Response headers 
*/ 
HTTP/1.1 403 Forbidden 
Date: Tue, 14 Mar 2017 08:11:55 GMT 
Server: Apache 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: POST, GET, DELETE, PUT 
Access-Control-Max-Age: 1000 
Access-Control-Allow-Headers: x-requested-with, Content-Type, origin, authorization, accept, client-security-token 
Content-Length: 253 
Keep-Alive: timeout=15 
Connection: Keep-Alive 
Content-Type: text/html; charset=iso-8859-1 

/** 
* Request headers 
*/ 
OPTIONS xxx HTTP/1.1 
Host: xxx 
Connection: keep-alive 
Access-Control-Request-Method: GET 
Origin: http://localhost:8100 
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 
Access-Control-Request-Headers: apikey, content-type 
Accept: */* 
Referer: http://localhost:8100/ 
Accept-Encoding: gzip, deflate, sdch, br 
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6 
AlexaToolbar-ALX_NS_PH: AlexaToolbar/alx-4.0.1 

Aber wenn ich diese URL versucht, in Postman Anwendung mit diesen Request-Header gesetzt, ich habe die richtige Antwort.

GET /xxx HTTP/1.1 
Host: sample.com 
Accept: application/json 
Content-Type: application/json 
apiKey: xxx 
Cache-Control: no-cache 
Postman-Token: xxx 

Ich bin an diesem Punkt fest.

Answer 1

Ich habe keinen Fehler in Ihrem Code gesehen. Aber Sie sollten diesen Code versuchen.Es funktioniert in meiner App.

getMethods(url:any) :Observable<Response>{ 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     headers.append('x-token', localStorage.getItem('token')); 

     return this.http.get(`${API_URL2+url}`,{headers:headers}) 
       .map((res:Response)=>{ 
         return res.json();}) 
       .catch((error:any)=>Observable.throw(error)||'server error'); 
    } 

Answer 2

Dies ist ein CORS-Problem (domänenübergreifendes Problem). Ihr Browser (nicht Angular) sendet eine OPTIONS-Anfrage, bevor er die eigentliche POST-Anfrage sendet. Effektiv verwirft Ihr Server die OPTIONS-Anfrage als nicht authentifiziert (oder 403 in Ihrem Fall verboten). Bitte lesen Sie this Antwort für weitere Informationen.

Haben Sie versucht, einen 'content-type' Header als 'application/x-www-form-urlencoded' oder 'multipart/form-data' zu setzen? Ich denke, das würde dazu führen, dass der Browser keine OPTIONS-Anfrage sendet, bevor er die POST-Anfrage sendet. Selbst wenn Sie das erste Problem (mit dem fehlenden OAuth-Header) lösen, können Sie aufgrund des zweiten Problems immer noch nicht in der Lage sein, POST zu senden.

Sie können Vergangenheit CORS Fragen erhalten, indem das Sie können cordova Whitelist plugin

Installation auch die Chrome Allow-Control-Origin extension versuchen und zu installieren.