Angular GET request error, but only on safari iOS

Question

I'm building a website using WordPress as a backend, and AngularJS as the frontend. I'm using the WordPress JSON API to get my data to the front-end.

https://wordpress.org/plugins/json-api/

The problem

I'm using AngularJS to get my data from the WordPress JSON API. I have created the following service:

this.getPage = function ( slug ) {
    return $http.get('wordpress/api/get_page/?slug=' + slug)
}

I use this service in my controller to get the current page like this:

HTTPService.getPage('home')
    .success(function ( data ) {
        $scope.page = data.page;
        console.log(arguments);
    })
    .error( function () {
        console.log(arguments);
    })

This is working fine in all browsers, except for Safari on iOS. On Safari on iOS I get the following response when I log the error arguments:

This is the safari debugger which showed when I connected my iPhone to my Mac. The error response which I get is error code 0..

What I have tried so far

I have set Access-Control-Allow-Origin "*" in the .htaccess file, but this doesn't seem to work. The request is done on the same domain with a relative URL, so I don't think that this is the problem.

So, does anyone know why this is not working on Safari (iOS)?

EDIT

Some extra information as requested:

Answer 1

I'm pretty sure that this is due to the fact that Safari is the only browser that has the policy of blocking "3rd party cookies and other website data" by default. Actually, this issue shouldn't be exclusive of Safari iOS, it should also happen with Safari on your OSX. I'm pretty sure that if it's not happening in your MacBook is because one day you changed the default settings of the "Privacy".

You can try this, open Safari, go to "preferences" and under the tab "Pricacy" check if you have the option: "Block cookies and other website data" set to "From third parties and advertisers". This is the first, and the default option in the modern versions of Safari.

In your MacBook it will look like this:

And in iOS it will look like this:

Just to confirm that this is in fact what's causing your issue: change this setting to "Never", clear the cache and try to reproduce that problem again. I'm quite confident that you won't be able to reproduce it.

Now, if you set it back to "Block cookies and other website data: From third parties and advertisers" and you first clear the cache, you will have that problem again (with either iOS or OSX). After you've confirmed that this is the cause of your problem, set this setting back to "From third parties and advertisers", so that you can reproduce and address the problem with the default settings.

Bare in mind that every time that you want to re-test this issue you will be better off clearing the cache of Safary. Otherwise it could happen that Safari decides that the site serving the API can be trusted and you won't be able to reproduce the issue. So, just to be sure, clear the cache every time that you test this.

I believe that the root of this problem is that Safari wants to make sure that the user has had a direct interaction with the page that it's serving the "3rd party content" before the main page loads that content.

I would need to know more about your project in order to suggest an "optimal" solution. For instance: will the final app be integrated under the same domain as the API? Because if that's the case, you shouldn't have that issue when you go to production. I mean, if the app that you are developing will be hosted under: http://whatever.yourDomain.org and the API is going to be part of that same domain (yourDomain.org), then you shouldn't have that issue at all in production.

On the other hand, if you need to have have the API hosted under a different domain, then you will have to find a way to "trick" Safari. Have a look at this:

• Safari 3rd party cookie iframe trick no longer working?

And this:

• http://www.allannienhuis.com/archives/2013/11/03/blocked-3rd-party-session-cookies-in-iframes/

I hope that this helps.