CROS Issue accur

Ionic Framework ionic-v3
1

when post api run i have create this problem…
1.

[Error] WebSocket network error: The operation couldn’t be completed. Connection refused (x192)
[Error] ERROR – Response {_body: XMLHttpRequestProgressEvent, status: 0, ok: false, …}
Response {_body: XMLHttpRequestProgressEvent, status: 0, ok: false, statusText: “”, headers: Headers, …}Response

[Error] Failed to load resource: Could not connect to the server. (ingredientlist, line 0)
[Error] WebSocket network error: The operation couldn’t be completed. Connection refused (x100)

  1. my service.ts file is…

import { Http, Headers, RequestOptions } from ‘@angular/http’;
import { Injectable } from ‘@angular/core’;
import ‘rxjs/add/operator/map’;

/*
Generated class for the RestapiServiceProvider provider.

See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/

@Injectable()
export class RestapiServiceProvider {

apiUrl = ‘http://localhost:8100/development/palates/public/api/v1/ingredientlist’;

constructor(public http: Http) {
console.log(‘Hello RestapiServiceProvider Provider’);
}

getUsers() {

let headers = new Headers();
headers.append(‘Content-Type’, ‘application/json’);
headers.append(‘Access-Control-Allow-Origin’, ‘*’);
headers.append(‘Access-Control-Allow-Methods’, ‘POST, GET, OPTIONS, PUT’);
headers.append(‘Accept’,‘application/json’);
headers.append(“Access-Control-Allow-Headers”, “X-Requested-With”);

let options = new RequestOptions({ headers: headers,withCredentials: true });

  let data1 = JSON.stringify({

user_id: 14,
token: “XckxUa93b10cab0e24511f219893bff2”
});

if (this.data) {
return Promise.resolve(this.data);
}

return new Promise(resolve => {

// app.post(’/’, function(req, res, next) {
// Handle the post for this route
// })
this.http.post(this.apiUrl, data1, options)

  .map(res => res.json())
  
  .subscribe(data => {
    this.data = data;
    resolve(this.data);
  });

});
}

}

  1. ionic.config.json file is…

“name”: “Demo”,
“app_id”: “”,
“type”: “ionic-angular”,
“integrations”: {
“cordova”: {}
},
“proxies”: [
{
“path”: “/ingredientlist”,
“proxyUrl”: “http://testsite4me.com/development/palates/public/api/v1/ingredientlist”
}
]
}

  1. login.ts

import { Component } from ‘@angular/core’;
import { IonicPage, NavController} from ‘ionic-angular’;
import { RestapiServiceProvider } from ‘…/…/providers/restapi-service/restapi-service’;

/**

@IonicPage()
@Component({
selector: ‘page-login’,
templateUrl: ‘login.html’,
providers: [RestapiServiceProvider]
})
export class LoginPage {

users: any;

constructor(public navCtrl: NavController, private restapi: RestapiServiceProvider) {

this.getUsersData();

}

ionViewDidLoad() {
console.log(‘ionViewDidLoad LoginPage’);
}

getUsersData() {
this.restapi.getUsers()
.then(data => {
this.users = data;
console.log(this.users)
});
}

}

please help…

thank you advance :slight_smile: