I am building an XDK app, was working good in xampp and fixed the header problem, after uploading to a live server the ajax call is not working and I got this error
XMLHttpRequest cannot load http://watanydemo.eb2a.com/metawe3/action/get?_=1451186106865. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
index.html:92 {"readyState":0,"status":0,"statusText":"error"}
Although I set the header by all the ways and still the origin is set to null
public function get()
{ $this->load->model('Name_model');
$result = $this->Name_model->read_names();
header('Access-Control-Allow-Origin: *');
header('Content-type: application/json');
echo json_encode($result);
}
NB my back end is Codeigniter
my Ajax call is
<script type="text/javascript">
$(document).ready(function() {
$('#loading-image').show();
try {
$.ajax({
type: "GET",
url: "http://watanydemo.eb2a.com/metawe3/action/get",
crossDomain: true,
contentType: "application/x-www-form-urlencoded",
async: true,
dataType: 'json',
processData: false,
cache: false,
success: function (response) {
alert("valid response");
for (var i = 0, res = response.length; i < res; ++i) {
var picture = response[i].picurl;
var name= response[i].name;
$("#row").append('<div class="col-md-4"><h1>'+name+'</h1><img id="pic" class="thumbnail img-responsive" alt="Bootstrap template"src="'+picture+'" />'+'<div class="well"></div></div>');
}
},
complete: function(){
$('#loading-image').hide();
},
error: function (ErrorResponse) {
console.log(JSON.stringify(ErrorResponse));
}
});
}
catch (error) {
console.log(JSON.stringify(error));
}
});
</script>