Cross-Domain Scripting Error using Angular and PHP on Openshift

Question

I've searched all over the web, found various answers in other stackoverflow threads, tried them ALL and couldn't get mine to work. Scenario:

• Using angular at client side and using http-get requests
• Using PHP at server side next to MySQL database running on Openshift host.

Angular code:

var app = angular.module("myapp", []).config(function ($httpProvider) {
//Enable cross domain calls
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

app.controller("Circle", function ($scope, $http)
{
    $scope.Bijstand = function (Verdiep) {
       $http.get(url + "?function=getMetingen&Verdieping="+Verdiep)
        .success(function (Result) {
            console.log(Result);
        });
    }
});

PHP code:

header("Access-Control-Allow-Origin: 'http://localhost:54700'")
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST"); 
header("Access-Control-Allow-Headers: X-Requested-With");

$servername = getenv('OPENSHIFT_MYSQL_DB_HOST').":".getenv('OPENSHIFT_MYSQL_DB_PORT');
$username = getenv('OPENSHIFT_MYSQL_DB_USERNAME');
$password = getenv('OPENSHIFT_MYSQL_DB_PASSWORD');
$dbname = getenv('OPENSHIFT_GEAR_NAME');

// Create connection
$con = $con = mysql_connect($servername, $username, $password);
// Check connection
if (!$con) {
    die("Connection failed: " . mysql_error());
} 
mysql_select_db($dbname,$con);

when making the http-get request from angular to php I get the following error:

 SEC7120 : Origin of 'http://localhost:54700' not found in Access -Control- Allow -Origin header . SCRIPT7002 : XMLHttpRequest : Network error 0x80700013 , Can not complete this operation by mistake 80700013 . SERVER ERROR - The server has detected an unexpected error that the request can not be completed.( XHR ) : GET - " getString " 

I've seen various methods of trying to fix this and I have tried ALL of them and none work. Please help me debug this. FYI: I'm not concerned with security of the database or the data. The information stored is not sensitive at all so don't hold back on the "privacy" issues. Thanks

Answer 1

This is probably not a complete answer, but the HTTP response can have only a single value for Access-Control-Allow-Origin .

For example, another SO Question discusses the problems when multiple ACAO fields are used.

Listing the values in a single field will not work either. The W3C Spec says:

Rather than allowing a space-separated list of origins, it is either a single origin or the string "null".

Using '*' (asterisk) as the value, will not work always, see the W3C Spec for more details.

Thus, the only safe value to return is ' http://localhost:54700 '.

Finally, Chrome has had issues with supporting CORS on localhost, see this Question for further details. This problem was still there a couple of months ago when I studied CORS the last time.