[英]how to set request headers in angular2 ionic2 application
我試圖在ionic2應用程序的http
get請求中設置請求標頭。 代碼的服務部分是
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());
}
}
這是實現請求標頭的正確方法嗎? 當我在應用程序上嘗試此響應時
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
請求/響應
/**
* 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
但是,當我在Postman
應用程序中嘗試使用已設置這些請求標頭的URL時,得到了正確的響應。
GET /xxx HTTP/1.1
Host: sample.com
Accept: application/json
Content-Type: application/json
apiKey: xxx
Cache-Control: no-cache
Postman-Token: xxx
我被困在這一點上。
我沒有在您的代碼中看到任何錯誤。但是您應該嘗試使用此代碼。它在我的應用程序中有效。
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');
}
這是一個CORS(跨域)問題。 您的瀏覽器(不是Angular)在發送實際的POST請求之前正在發送OPTIONS請求。 實際上,您的服務器會丟棄未經身份驗證的OPTIONS請求(在您的情況下為403禁止)。 請閱讀此答案以獲取更多信息。
您是否嘗試將“內容類型”標頭設置為“ application / x-www-form-urlencoded”或“ multipart / form-data”? 我認為這將導致瀏覽器在發送POST請求之前不發送OPTIONS請求。 因此,即使解決了第一個問題(缺少OAuth標頭),由於第二個問題,您仍然可能無法進行POST。
您可以通過安裝cordova白名單插件來解決CORS問題
您也可以嘗試安裝Chrome Allow-Control-Origin擴展程序 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.