Angular $http returns "no access control allow origin" header, but jQuery $.get request returns information

Question

How the heck can jQuery $.get, $.post and get desired results but angular can't $http.get, $http.post? Why is the origin policy not working for angular but for jquery?

Laravel backend, angular front-end. I'm considering just using jQuery because it doesn't prevent CRUD actions from happening on the client-side.

I configured $http and $httpProvider...

.run(function($http){
     $http.defaults.headers.common['Access-Control-Allow-Origin'] = "*";
     $http.defaults.headers.common['Access-Control-Allow-Methods'] = "GET, POST, PUT, DELETE, OPTIONS";
     $http.defaults.headers.common['Access-Control-Allow-Headers'] = "Authorization";
})
.config(function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
})

And laravel is sending back the appropriate header...

App::after(function($request, $response)
{
    // header('Access-Control-Allow-Origin', '*');
     $response->headers->set('Access-Control-Allow-Origin', '*');
});

So the weird thing is angular $http cannot get anything back from the server and produces this error:

XMLHttpRequest cannot load http://0.0.0.0:8000/api/test. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

But jQuery $.get and $.post work correctly!

$.post('http://0.0.0.0:8000/api/test', function(resp){
    console.log(resp);
});

What am I doing wrong here?

+1 not sure why the downvotes, this isn't the typical xDomain problem — charlietfl
– charlietfl, Commented Jul 14, 2014 at 19:18
is your jQuery running from localhost:9000 (same place as angular) as well or is it some where else? — DineshKP
– DineshKP, Commented Jul 14, 2014 at 19:22
did you try on other browsers from what you are currently using? If there is any more information of the error on the console can you post it as well? — DineshKP
– DineshKP, Commented Jul 14, 2014 at 19:30

dave · Accepted Answer · 2014-07-14 19:09:03Z

2

.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
]);

Just setting useXDomain to true is not enough. AJAX request are also send with the X-Requested-With header, which indicate them as being AJAX. Removing the header is necessary, so the server is not rejecting the incoming request.

Try adding this within filters.php:

App::before(function($request)
{
    if (Request::getMethod() == "OPTIONS") {
        $headers = array(
        'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Headers'=> 'X-Requested-With, content-type, Authorization',);
        return Response::make('', 200, $headers);
    }
});

It might be failing on the pre-flight request

edited Jul 14, 2014 at 19:09

answered Jul 14, 2014 at 19:02

dave

65.1k6 gold badges81 silver badges98 bronze badges

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

1 Comment

Onur Yıldırım Over a year ago

There is no such thing as useXDomain in Angular. It never made into the Angular code. github.com/angular/angular.js/issues/2956

Collectives™ on Stack Overflow

Angular $http returns "no access control allow origin" header, but jQuery $.get request returns information

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related