Ionic HTTP-Anfragen mit Autorisierungsheadern

Question

Ich sende eine Anfrage erhalten an den Server und es erfordert ein JWT-Token zu authentifizieren. Ionic besteht jedoch darauf, eine Pre-Etch-Anfrage ohne einen zu machen und abzustürzen. (? Auch ist es eine Möglichkeit, nicht 200 Antworten zu erfassen der Server gibt eine Menge von diesen (zB 403 {Nachricht: Konto ungültig}))

-Code

auth.ts

import { Headers, RequestOptions } from '@angular/http' 
import 'rxjs/add/operator/toPromise'; 
... 
export const getToken = function(http){ 
    return new Promise((resolve, reject) => { 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
     headers.append('Authorization', 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU4Yzg1MmI1YmQ1NjE1MGJkMDAxZWEzNyIsImlhdCI6MTQ4OTY3ODE0NywiZXhwIjoxNDg5NjgxNzQ3fQ.zUWvBnHXbgW20bE65tKe3icFWYW6WKIK6STAe0w7wC4'); 
     let options = new RequestOptions({headers: headers}); 
     http.get('//localhost:3000/auth/users', {headers: options}) 
     .toPromise() 
     .then(res => resolve(res)) 
     .catch(err => console.log(err)); 
    }); 
} 

Chrome Konsole:

Response for preflight has invalid HTTP status code 401 

Server sieht: (I die Anfrage abgemeldet und es gibt keine Kopf- oder Körper)

OPTIONS /auth/users 401 25.613 ms - - 

Answer 1

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Toast, Device } from 'ionic-native'; 
import { Http, Headers } from '@angular/http';  
let headers = new Headers(); 
     headers.append('Token', this.Token); 
     headers.append('id', this.ID); 

     this.http.get(this.apiUrl + this.yourUrl, { headers: headers }) 
     .map(res => res.json()) 
     .subscribe(
     data => { 
      console.log(data); 
      if (data.code == 200) { // this is where u r handling 200 responses 
      if (data.result.length > 0) { 
       for (let i = 0; i < data.result.length; i++) { 
       var userData = { 
        username: data.result[i].username, 
        firstName: data.result[i].firstName, 
        lastName: data.result[i].lastName, 
       } 
       console.log(JSON.stringify(userData)); 
       this.Results.push(userData); 
       } 
      } 


      } 
      else { // here non 200 responses 
      console.log(data.message); 
      } 

      this.user= this.Results; 

      console.log(this.user); 
     }, 
     err => { 

      console.log("ERROR!: ", err); 
     }); 

diese Art und Weise u in der Lage sein wird, alle Antworten von Back-End-

Ich hoffe, dass dies für Sie sonst dieses Problem mit

Answer 2

Für jeden arbeitet zu behandeln. devanshsadhotra Antwort ist groß, aber hier ist die Art, wie ich dieses Problem gelöst:

ionic.config.json (fügen Sie alle relevanten Strecken hier)

"proxies": [ 
    { 
     "path": "/api", 
     "proxyUrl": "http://localhost:3000/api" 
    }, 
    { 
     "path": "/auth", 
     "proxyUrl": "http://localhost:3000/auth" 
    } 
    ] 

Ihre Networking-Datei (auth.js in diesem Fall)

import { Headers } from '@angular/http' //Headers need to be in this object type 
import 'rxjs/add/operator/toPromise'; //turns observable into promise 

export const getToken = function(http){ //passing in the Http handler to the function for no good reason. but it works 
    return new Promise((resolve, reject) => { //return a promise to the calling function so it can handle the response 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
     headers.append('Authorization', 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU4Yzg1MmI1YmQ1NjE1MGJkMDAxZWEzNyIsImlhdCI6MTQ4OTY4MjY2MywiZXhwIjoxNDg5Njg2MjYzfQ.tW8nT5xYKTqW9wWG3thdwf7OX8g3DrdccM4aYkOmp8w'); 
     http.get('/auth/users', {headers: headers}) //for post, put and delete put the body before the headers 
     .toPromise() //SANITY!!! 
     .then(res => resolve(res)) //Things went well.... 
     .catch(err => console.log(err)); //Things did not... 
    }); 
}