Issue of CORS. I already add header in serverside - php

Question

currently i am create a small that display markers on google map. Coordinates come from mysql database but i getting the error i don't know why it's came.
ERRor - XMLHttpRequest cannot load http://localhost:8080/markers.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.7:8100' is therefore not allowed access. The response had HTTP status code 404.
markers.php
<?php
//Create a connection to the database
$mysqli = new mysqli("localhost", "test");
if (!$mysqli) {
die("Connection failed: " . mysqli_connect_error());
}
//The default result to be output to the browser
$result = "{'success':false}";
//Select everything from the table containing the marker informaton
$query = "SELECT * FROM marker";
//Run the query
$dbresult = $mysqli->query($query);
//Build an array of markers from the result set
$markers = array();
while($row = $dbresult->fetch_array(MYSQLI_ASSOC)){
$markers[] = array(
'id' => $row['id'],
'name' => $row['name'],
'lat' => $row['lat'],
'lng' => $row['lng']
);
}
//If the query was executed successfully, create a JSON string containing the marker information
if($dbresult){
$result = "{'success':true, 'markers':" . json_encode($markers) . "}";
}
else
{
$result = "{'success':false}";
}
//Set these headers to avoid any issues with cross origin resource sharing issues
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type,x-prototype-version,x-requested-with');
//Output the result to the browser so that our Ionic application can see the data
echo($result);
?>
app.js
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, GoogleMaps) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
GoogleMaps.init();
})
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('map', {
url: '/',
templateUrl: 'templates/map.html',
controller: 'MapCtrl'
});
$urlRouterProvider.otherwise("/");
})
.factory('Markers', function($http) {
var markers = [];
return {
getMarkers: function(){
return $http.get("http://localhost:8080/markers.php").then(function(response){
markers = response;
return markers;
});
}
}
})
.factory('GoogleMaps', function($cordovaGeolocation, Markers){
var apiKey = false;
var map = null;
function initMap(){
var options = {timeout: 10000, enableHighAccuracy: true};
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Wait until the map is loaded
google.maps.event.addListenerOnce(map, 'idle', function(){
//Load the markers
loadMarkers();
});
}, function(error){
console.log("Could not get location");
//Load the markers
loadMarkers();
});
}
function loadMarkers(){
//Get all of the markers from our Markers factory
Markers.getMarkers().then(function(markers){
console.log("Markers: ", markers);
var records = markers.data.markers;
for (var i = 0; i < records.length; i++) {
var record = records[i];
var markerPos = new google.maps.LatLng(record.lat, record.lng);
// Add the markerto the map
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: markerPos
});
var infoWindowContent = "<h4>" + record.name + "</h4>";
addInfoWindow(marker, infoWindowContent, record);
}
});
}
function addInfoWindow(marker, message, record) {
var infoWindow = new google.maps.InfoWindow({
content: message
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker);
});
}
return {
init: function(){
initMap();
}
}
})
.controller('MapCtrl', function($scope, $state, $cordovaGeolocation) {
});

Answer 1

There is a configuration to do with Ionic :
http://ionicframework.com/docs/cli/test.html
Or if you are using google chrome you can add this plugin, it solve the problem for me :
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
Hope it should help you