Ionic + PHP + CORS

My Home.html is

        My Favourite Technologies

<ion-content padding>

    <button class="add" ion-button item-right icon-right margin-bottom color="primary"(click)="addEntry()">
      Add a technology
      <ion-icon name="add"></ion-icon>

  <ion-item *ngFor="let item of items">
     <h2>{{ }} </h2>
     <button ion-button color="primary" item-right (click)="viewEntry({ record: item })">View</button>



import { AddTechnologyPage } from './../add-technology/add-technology';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

   public items : any = [];
   constructor(public navCtrl: NavController, public http: Http) {


   ionViewWillEnter() {

   // Retrieve the JSON encoded data from the remote server
   // Using Angular's Http class and an Observable - then
   // assign this to the items array for rendering to the HTML template
   load() {
      this.http.get('http://localhost:8080/ionic/retrieve-data.php').map(res => res.json()).subscribe(data => {
         this.items = data;

   // Allow navigation to the AddTechnology page for creating a new entry
   addEntry() {

   // Allow navigation to the AddTechnology page for amending an existing entry
   // (We supply the actual record to be amended, as this method's parameter,
   // to the AddTechnology page
   viewEntry(param) {
      this.navCtrl.push(AddTechnologyPage, param);


You solve this? I have same problem

Add the headers in php

1 Like

Error Still displays, tried manipulating but still shows

Do you know the app postman?

Try the request with this app to check the server side.

Do you send an header too?

Put this at the top of your php section before other script


<?php header("Access-Control-Allow-Origin: *"); . . . . ?>