Как использовать метод http post для ионных 2 и угловых 2?

Question

Теперь я создаю приложение Ionic 2 для регистрации и аутентификации в Stormpath. Когда я зарегистрировал пользователя, я использовал метод http post. Следующая функция находится у провайдера.

register(username: string, email: string, password: string, givenname: string, surname: string){ 
 
    var headers = new Headers(); 
 
    headers.append('content-type', 'application/json;charset=UTF-8'); 
 
    headers.append('Access-Control-Allow-Origin','*'); 
 
    let options= new RequestOptions({headers: headers}); 
 
    
 
    var url = 'https://api.stormpath.com/v1/tenants/1QI0gxrvZNfYAFsamRTwbf/accounts'; 
 

 
    var data = JSON.stringify({ 
 
     surname: surname, 
 
     username: username, 
 
     givenName: givenname, 
 
     email: email, 
 
     password: password 
 
    }); 
 

 
    this.http.post(url, data, options).map(res=>res.json()).subscribe(data=>{ 
 
     console.log(data) 
 
    }, err=>{ 
 
     console.log("Error!:", err.json()); 
 
    }); 
 
}

И с помощью этой функции код выглядит следующим образом.

signup(form){ 
 

 
    console.log('Pressed Signup button.') 
 

 
    let username = form.value.username, 
 
     email = form.value.email, 
 
     password = form.value.password, 
 
     givenName = form.value.givenName, 
 
     surname = form.value.surname; 
 

 
    this.stormpathService.register(username, email, password, givenName, surname); 
 

 
    this.navCtrl.pop(); 
 
    }

Файл HTML является:

<ion-content padding> 
 
    <form #signupForm="ngForm" (ngSubmit)="signup(signupForm)"> 
 
    <ion-list style="margin-bottom: 25%;"> 
 
     <ion-item> 
 
     <ion-label floating>GivenName</ion-label> 
 
     <ion-input [(ngModel)]="givenName" name="givenName" type="text" required=""></ion-input> 
 
     </ion-item> 
 
     <ion-item> 
 
     <ion-label floating>SurName</ion-label> 
 
     <ion-input [(ngModel)]="surname" name="surname" type="text" required=""></ion-input> 
 
     </ion-item> 
 
     <ion-item> 
 
     <ion-label floating>Username</ion-label> 
 
     <ion-input [(ngModel)]="username" name="username" type="text" required=""></ion-input> 
 
     </ion-item> 
 

 
     <ion-item> 
 
     <ion-label floating>Email</ion-label> 
 
     <ion-input [(ngModel)]="email" name="email" type="text" ></ion-input> 
 
     </ion-item> 
 

 
     <ion-item> 
 
     <ion-label floating>Password</ion-label> 
 
     <ion-input [(ngModel)]="password" name="password" type="password" required=""></ion-input> 
 
     </ion-item> 
 
    </ion-list> 
 

 
    <div style="margin-bottom: 8%;"> 
 
     <button ion-button type="submit" color="light" full > Sign up </button> 
 
    </div> 
 

 
    </form> 
 
</ion-content>

экран Ошибка:

Почему я не получаю ответ от сервера штурма?

Answer 1

Можете ли вы попытаться преобразовать свой HTTP-запрос и добавить заголовки?

$http.post('yoururl', { 
    foo: 'bar' 
    }, { 
    transformRequest: { 
     body: function(data, headersGetter) { 
     return myTransformFn(data); 
    }, 
    headers: function(data, headersGetter) { 
     var headers = headersGetter(); 
     headers['Content-Type'] = 'x-www-form-urlencoded'; 
     return headers; 
    } 
    } 
}); 

Answer 2

Я была такая же проблема, перейти к расширениям хромовых и поиск для плагина CORS и добавить лучший плагин вам нравится, то включить плагин будет работать

Answer 3

В Ионные последних версиях, если вы используя ionic serve commnad, то вы должны использовать прокси для предотвращения Предполетный и CORS вопросы,

Сначала добавьте путь API и URL в ionic.config.json файл как

{ 
    "name": "APP-NAME", 
    "app_id": "", 
    "proxies": [ 
    { 
     "path": "/accounts", 
     "proxyUrl": "https://api.stormpath.com/v1/tenants/1QI0gxrvZNfYAFsamRTwbf/accounts" 
    } 
    ] 
} 

Теперь при вызове вашего API из http использовать /accounts URL вместо https://api.stormpath.com/v1... как,

.... 
    var url = '/accounts'; // use the Proxy Path here instead of Stormpath API URL 

    var data = JSON.stringify({ 
     surname: surname, 
     username: username, 
     givenName: givenname, 
     email: email, 
     password: password 
    }); 

    this.http.post(url, data, options).map(res=>res.json()).subscribe(data=>{ 
     console.log(data) 
    }, err=>{ 
     console.log("Error!:", err.json()); 
    }); 
.... 

После внесения вышеуказанных изменений необходимо снова запустить команду ionic serve.

Тем не менее, если вы получаете проблемы, то обратитесь Handling CORS Issues In Ionic