No 'Access-Control-Allow-Origin' with Angularjs

Question

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

$apiUrl = 'https://gtmetrix.com/api/0.1/test';
$apiUser = '[email protected]';
$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/[email protected]&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'];

possible duplicate of Ways to circumvent the same-origin policy — Quentin
– Quentin, Commented Nov 29, 2013 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
– Ye Liu, Commented Nov 29, 2013 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
– Joe Conlin, Commented Nov 29, 2013 at 20:25
You can't, otherwise what's the point of cross domain protection if anyone can delete it with one line? — Mark Ni
– Mark Ni, Commented Nov 29, 2013 at 21:06

Philippe Boissonneault · Accepted Answer · 2013-11-29 20:51:51Z

2

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

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

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

answered Nov 29, 2013 at 20:51

Philippe Boissonneault

3,9493 gold badges28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Conlin Over a year ago

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

Collectives™ on Stack Overflow

No 'Access-Control-Allow-Origin' with Angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related