1

Cannot figure out how to get around cross domain issue. My code:

$apiUrl = 'https://gtmetrix.com/api/0.1/test';
$apiUser = 'joe@vandigroup.com';
$apiKey = '1234567890';
$requestUrl = 'http://converge.io';

    function FetchCtrl($scope, $http, $templateCache) {

        $scope.method = 'post';
        $scope.url = $requestUrl;

        $scope.fetch = function() {
            $scope.code = null;
            $scope.response = null;

            $http({method: $scope.method, url: $apiUrl + '?login-user=' + $apiUser + '&login-pass=34bcb5c46bc6d5fb18a8552820027eb9' + '&url=' + $scope.url, cache: $templateCache}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
            }).
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
        };
        $scope.fetch();

        $scope.updateModel = function(method, url) {
            $scope.method = method;
            $scope.url = url;
        };

    }

The error:

XMLHttpRequest cannot load https://gtmetrix.com/api/0.1/test?login-user=joe@vandigroup.com&login-pass=1234567890&url=http://converge.io. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://converge' is therefore not allowed access.

It seems that I need to include the following but cannot get it to work:

delete $http.defaults.headers.common['X-Requested-With'];
Joe Conlin
  • 5,976
  • 5
  • 25
  • 35
  • possible duplicate of [Ways to circumvent the same-origin policy](http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) – Quentin Nov 29 '13 at 17:03
  • "Access-Control-Allow-Origin" is a header sent by the server in http response, the client-side i.e. angular/browser only send "Origin" header. So you need to first make sure your web service supports the "Access-Control-Allow-Origin" header. – Ye Liu Nov 29 '13 at 18:24
  • Thanks for the down vote guys... I am aware of those solutions but I am trying to figure out how to get it to work using Angularjs. This is why I put this delete Shttp... code in my post. If I can't get it working then I will switch over to iFrame or proxy method. – Joe Conlin Nov 29 '13 at 20:25
  • 2
    You can't, otherwise what's the point of cross domain protection if anyone can delete it with one line? – Mark Ni Nov 29 '13 at 21:06

1 Answers1

2

I think there is a workaround for this. Here is the logic

  1. Make a little PHP script on your server (or any server side scripting)
  2. Call it with ajax and the api params you need (url, user, key ...)
  3. Use CURL to do the request (or any equivalent)
  4. Print what you need

So instead of calling gtmetrix with your xhttprequest, try calling the script you've done.

Philippe Boissonneault
  • 3,949
  • 3
  • 26
  • 33
  • While there are numerous ways to accomplish this task, I am accepting this answer as this is the one I ended up using. I was originally was going to do this but hoping there was a way to do this inside of Angular as my other calls have no cross domain issues. Thx – Joe Conlin Nov 30 '13 at 18:32