$http ajax cross domain

ionic-v1
1

Hey guys,

So I have a backend service (currently running on my localhost) and I have my ionic app (also running on my localhost).
I am trying to make a super simple ajax call to my backend, however I just can’t get it to work.
My app config looks like this:

// Define the HTTP config to enable CORS API calls
airborneApp.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.headers.common = 'Content-Type: application/json';
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
]);

My service looks like this:

app.service('ExperienceService', function($http) {
this.getExperiences = function() {
    // Since $http.get returns a promise, and promise.then() also returns a promise
    // that resolves to whatever value is returned in its callback argument,
    // we can return that.
    return $http({method: "GET",
        url: 'http://localhost/goairly/trunk/monumentus/index.php/api/experience/experience',
    }).success(function(result) {
        return result.data;
    }).error(function(data, status, headers, config) {
        console.log("error");
        console.log(data);
        console.log(status);
        console.log(headers);
        console.log(config);
    });
};

});

My Chrome console outputs 404 (Not Found). Further more it sends it as OPTIONS instead of GET. When I go to the Network tab and inspect the request itself, I notice that the request does not have Content-Type: "application/json", which is necessary for us to access our server. However, it seems that that header is removed altogether.

EDIT I tested the URL, with Advanced Rest Client Chrome plugin and it works just fine. When I compare the two headers (from chrome and from the advanced rest client) the main difference is the content-type.

Anybody else running into this?

1 Like
2

Ok so I figured part of this out.
So I realized that the content-type: application/json is not sent with a GET. That makes sense since GET doesn’t have a body, and we changed that on our back end to not always required, content-type: application/json.

However, I still get weird issues. In my console I am getting a 404 (Not Found) error, followed by an Invalid HTTP status code 404.
Then my console outputs: XMLHttpRequest cannot load http://localhost/goairly/trunk/monumentus/index.php/api/experience/experience. Invalid HTTP status code 404

However, when I click on the url, it opens up a page with the returned data from our API call. This is really weird . I am getting a 404 although the data is being returned to me.

3

So I got it work. The issue was indeed that I was checking for a content-type, on a GET request. Sigh, that was complicated for no reason

1 Like
4

Hi @mlovekovsky
I am getting the facing the same issue that you faced.Could you please provide the solution for this.

5

hey,

Is the backend service you are trying to reach one that you wrote? Because if it is you have to make sure CORS is enabled.

6

I too have the exact same issue. What did you do to make it work ? I have CORS enabled.

7

You won’t run into this issue when your app is deployed to an actual device.
But to get around this issue in development, you can download the Chrome Allow Cross Origin Extension.

Hope that helps.
Nelson