在Openshift上使用Angular和PHP的跨域脚本错误

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.