I’m facing a problem (yes again :)) with Http usage.
I’m trying to post something on a Symfony2 Route.
Following the Angular2 doc, I set their code, unfortunately nothing happens when I’m executing it, no error in console, nothing …
I’ve tried to call the URL in my browser, and no route troubles…
Here my code :
// ... Other imports
import {Component, View, Injectable} from '@angular/core';
import {Http, Headers, RequestOptions, Response} from '@angular/http';
// ... Other imports
@Page({
templateUrl: 'build/pages/diagnostic/first/first.html',
directives: [FORM_DIRECTIVES]
})
@Injectable()
export class FirstPage {
firstForm: ControlGroup;
firstName: AbstractControl;
lastName: AbstractControl;
nav: NavController;
userCreateUrl = 'http://my-amazing-url';
http: Http;
static get parameters() {
return [[NavController], [NavParams], [FormBuilder], [Http]];
}
constructor(nav: NavController, navParams: NavParams, fb: FormBuilder, http: Http) {
this.nav = nav;
this.http = http;
// ....
}
dummyPost() {
let body = JSON.stringify({ "foo":"bar" });
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(this.userCreateUrl, body, options)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
console.log(body);
return body.data || {};
}
private handleError (error: any) {
console.log("error");
}
//.......
Thank you for your answer.
I’ve something happened now, but “XMLHttpRequest cannot load http://my_webservice_target. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://my_ip:8100’ is therefore not allowed access.”
That error is very common when doing XHR/AJAX requests. It isn’t something ionic or angular specific. It probably has something to do with the remote server you are trying to access.
Sometimes this error occurs only in the browser, but disappears when you’re running the app natively on a device.
If the issue occurs only in the browser, download the CORS plugin for Chrome/Firefox. You can configure that browser plugin to only intercept your connections to a specific server, or to intercept everything (not recommended, causes issues with some websites, like FB, Gmail … etc)
Thank you, I’ve edited my answer as same as you answered yourself
I’ve “XMLHttpRequest cannot load http://webservice_host. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://my_ip:8100’ is therefore not allowed access.”
Edit: if you are using an ExpressJS server in the backend, try cors npm package. You can plug it right into your Express server and it will solve your issue.
Well when you do have the choice, you should use Express
Just recently I started experimenting with Express + TypeScript. It’s so clean and organized IMO. Also, I get to stick to the same language as my front-end (Angular2)
