No 'Access-Control-Allow-Origin' issue on live Hybrid App

Question

I am done developing my first hybrid app. It runs smoothly in localhost. But when I tried to make it live, I got this error.

XMLHttpRequest cannot load https://www.example.com/app/login.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.

Why is this happening?

Here is my sample set up on my ajax request:

$.ajax({
           type: "POST",
           url: "https://www.example.com/app/login.php",
           crossDomain: true,
           dataType: 'json',
           data: $.trim(frm.serialize()),
           timeout: 10000,
           beforeSend: function() {                  
              $('#loader').css({
                display: "block"
               });
  }

Then on my php server code:

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
header('HTTP/1.1 200 OK');
{
//more code here..

echo json_encode($result_array);
}

So as you can see I already added a header Access-Control-Allow-Origin: * but it seems doesn't work. What do I need to know to make this error gone? Or what should the possible problem of it?

Update: In firefox this is the console log error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.example/app/login.php. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

Any help? I'm using intel xdk in building my app.

Answer 1

The ajax send error as 500 Internal Server Error because there is something wrong with the server side (php code) in which the function used is for higher PHP version. My host php version is lower that I am using on local machine. Trying to rewrite the code and test first its respond data online fixed my issue. There's nothing wrong with the ajax request code.