Safari fails on request to a non-authenticated API

[coryshaw1]

//SoudcloudService
vm.embed = function( trackUrl ) {
    vm.trackUrl = trackUrl;
    vm.url = 'http://api.soundcloud.com/oembed?format=json&url=' + vm.trackUrl + '&auto_play=true&maxheight=200';

    return $http.get(vm.url);
};

...

//Calling in controller
SoundcloudService.embed( vm.list[index].permalink_url )
    .success(function(data, status) {
        vm.loading = false;
            vm.embedHtml = $sce.trustAsHtml(data.html); //Is HTML5 iframe so handle javascript
    }).error(function(data, status, headers, config) {
        vm.loading = false;
        var configText = function(){
                var output = '';
                for (var property in config) {
                  output += property + ': ' + config[property].toString()+'\n ';
                }
                return output;
              }
              var headersText = function(){
                var output = '';
                for (var property in headers) {
                  output += property + ': ' + headers[property].toString()+'\n ';
                }
                return output;
              }
              console.log('Status:', status,
                            '\nData:', data, 
                            '\nHeaders:', headersText(), 
                            '\nConfig:', configText());
    });

//Console log
Failed to load resource: https://soundcloud.com/oembed?format=json&url=http://soundcloud.com/flume/seekae-test-recognise-flume-re-work&auto_play=true&maxheight=200 Cannot make any requests from null.

XMLHttpRequest cannot load https://soundcloud.com/oembed?format=json&url=http://soundcloud.com/flume/seekae-test-recognise-flume-re-work&auto_play=true&maxheight=200. Cannot make any requests from null.

Status: 0 
Data:  
Headers: Empty Object
Config: 
    method: GET
    transformRequest: function (d) {
      return isObject(d) && !isFile(d) && !isBlob(d) ? toJson(d) : d;
    }
    transformResponse: function (data) {
      if (isString(data)) {
        // strip json vulnerability protection prefix
        data = data.replace(PROTECTION_PREFIX, '');
        if (JSON_START.test(data) && JSON_END.test(data))
          data = fromJson(data);
      }
      return data;
    }
    url: http://api.soundcloud.com/oembed?format=json&url=http://soundcloud.com/flume/seekae-test-recognise-flume-re-work&auto_play=true&maxheight=200
    headers: Empty Object

When attempting to make a $http.get request in Safari that is the console output. This same get request works in all other major browsers.

[caitp]

Hi @coryshaw1 --- could you please post a complete reproduction (http://plnkr.co/, http://jsbin.com/) so we can see what you're seeing? thanks.

[coryshaw1]

Plunker isn't working at the moment so here is a JsBin link: http://jsbin.com/qeqoketaheki/1/edit?html,output

I am following John Papa's AngularJS style guide (other than file structure for time's sake)

[caitp]

Looks like a CORS issue --- https://github.com/WebKit/webkit/search?utf8=%E2%9C%93&q=%22Cannot+make+any+requests+from+null.%22&type=Code error shows up in CORS tests in webkit.

It's admittedly a pretty terrible error message that doesn't make a lot of sense, but yeah. I'll take a look on the webkit issue tracker to see if there's more info about why this is failing in webkit and working in other browsers.

[coryshaw1]

Thanks @caitp ! I will say that after lots of testing, it seems to work if I don't wrap each controller/service/etc. in a self-invoking function. (function(){ //example })();, but I would prefer to be able to keep them all in separate self-invoking functions to not have variable interferences between controllers.

[caitp]

I don't think it's actually related to CORS, it looks like an issue with sandboxing --- but I'm not sure how that repro is treated as sandboxed in non-edit mode. we'll see. Might be related to getting X-Frame-Option: SAMEORIGIN but I would expect that to break the iframe once you get a response, not break as soon as the XHR is sent

[coryshaw1]

It might be easier for you to fork or clone my project ng-soundcloud-playlist. Just npm install and gulp serve. The actual file structure is easier to follow too.

[caitp]

I suggest you file a bug https://bugs.webkit.org/ --- feel free to link it here or CC me directly

[coryshaw1]

I filed a bug here: https://bugs.webkit.org/show_bug.cgi?id=136081 I also CC'd your Github email. Thanks again.

[gkalpak]

Closing since this is a WebKit issue and not related to Angular.