Question

package.json

{
  "name": "super-project",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/camera": "4.3.3",
    "@ionic-native/core": "4.6.0",
    "@ionic-native/splash-screen": "4.6.0",
    "@ionic-native/status-bar": "4.6.0",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "moment": "^2.22.1",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

我的代码->

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import { HttpClient, HttpResponse, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { catchError } from 'rxjs/operators';
import { HandleError, HttpErrorHandler } from '../../common/providers/http-error-handler';

@Injectable()
export class MyService {

  constructor(        
    private httpErrorHandler: HttpErrorHandler,        
    private auth: AuthProvider,
    private httpClient: HttpClient,
    private businessConstant: BusinessConstant,
    private storeManager: StoreResourceManager,
    private util: Util) {
        this.handleError = httpErrorHandler.createHandleError('MyService');
}    

login(loginRequest: LoginRequest): Observable<StoreResource> {              
    let url:string = BaseUrl+'/test';
    let myHeaders : HttpHeaders = new HttpHeaders()
        .set('Authorization','dummy auth')
        .set('Content-Type','application/json');

    //Block (A)
    // return this.httpClient
    //         .post<StoreResource>(url, loginRequest,{headers:myHeaders} )
    //         .pipe( catchError(this.handleError('Login', new StoreResource() )));        

    //Block (B)
    return this.httpClient.get<StoreResource>(url, {headers:myHeaders})
        .pipe( catchError(this.handleError('Login', new StoreResource() ))); 
}  
}

在块（A）中，我在发布请求中设置标头，在服务器端 我同时收到“授权”和“内容类型的标题正确。

但是，在块（B）中，我在获取请求上设置标头，在服务器端 我将两个标头值都接收为'null' 。我参考了this stackblitz link来编写此代码。过去5天，我一直在努力解决此问题。即使在研究了许多SO答案和大量谷歌搜索之后，我也无法解决这个问题。非常非常令人沮丧。任何帮助将不胜感激。

Answer 1

尝试使用以下命令生成“超级”模板： ionic start your_app_name超级它有一个使用http客户端和标头的有用示例。

Answer 2

阅读the source时，建议您尝试使用subscribe而不是pipe，例如

getData() {
  this.http.get(this.url, {headers: myHeaders}).subscribe(res => {
    this.posts = res;
  });
}

有关更多详细信息，请参见Introduction to Angular's HttpClient。

请帮助我。

Answer 3

我解决了这个问题。我所有的请求都使用'OPTIONS'方法进行了预检，并且我的服务器正在拒绝任何没有令牌的请求，包括显然没有任何令牌的预检'OPTIONS'请求。我刚刚修改了服务器以允许“ OPTIONS”请求，并且一切正常。我感谢所有及时答复的人。

在Ionic 3（使用Angular 5.2.9）中，HttpClient不能为get请求设置标头，但可以为post请求设置标头

3 个答案: