Ionic App not working in Mobile but Works in Browser - php

Question

I have created an app for the Registration Form using [Ionic + PHP] and I face the following issue.
CORS Add-on: Activated - It works Fine when I use it in the http://localhost:8100/ionic-lab
CORS Add-on: Deactivated - It does not works Fine when I use it in the http://localhost:8100/ionic-lab and the below mentioned error occurs.
Below I will explain the codes in my Files.
remote-service.ts
constructor(public http: Http) {
this.headers = new Headers()
this.headers.append('Content-Type', 'application/json')
this.headers.append('Content-Type', 'application/x-www-form-urlencoded')
this.headers.append('Access-Control-Allow-Origin', 'http://localhost:8100')
this.headers.append('Access-Control-Allow-Credentials', 'true')
this.headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, HEAD')
this.headers.append('Access-Control-Allow-Origin', '*')
this.headers.append('Accept', 'application/json')
this.headers.append('Accept', 'application/x-www-form-urlencoded')
console.log('Hello RemoteServiceProvider Provider');
}
getAllUsers() {
let options = new RequestOptions({ headers: this.headers })
return this.http.get('http://haitutorial.com/HybridApp/listAllUsers.php', options)
.map(res => res.json());
}
getAllUsers() - This function will fetch all the users Registered from the specific URL.
database.php
<?php
include('database.php');
header('Access-Control-Allow-Origin' , '*');
header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
header('Accept','application/json');
header('content-type','application/json');
$query = "SELECT * FROM `users` WHERE `status`='1' AND `delete_status`='0' ORDER BY `user_id` DESC";
$result = mysqli_query($con,$query);
$count = mysqli_num_rows($result);
$resultant_array = array();
if($count>0)
{
while($informations = mysqli_fetch_assoc($result))
{
$resultant_array[] = $informations;
}
print_r(json_encode($resultant_array));
}
else
{
$resultant_array[] = ["success"=> 200, "message"=> "No Data Found", "status_code"=>1 ];
echo $output = json_encode($resultant_array);
}
?>
The Above URL mentioned in the getAllUsers() works in the Browser but when placed inside the Ionic App it shows the below Error.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://haitutorial.com/HybridApp/listAllUsers.php. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
The above Issue is solved when I enable the CORS add-on in the Browser. But when I Disable the CORS add-on in the Browser it shows the Error.
Like wise the Same Error prevails in the Insert Page Also. When I Insert the Data from the APP it redirects to the List Page and the Data are not displayed telling the above said Error.
I have added header() in the PHP File also. But I am unable to trace out the Error. I am in need to Fix this Error without the use of Add-on like stuffs in the browser and needs to run successfully in APP too.

Answer 1

You need to set header at server end not ionic side.
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");