Can't perform CORS request using Angularjs

Question

I am writing my first AngularJS app and have run into a problem with CORS in Angular. Have tried what was mentioned in this reply but still have no luck solving this.

The JS code (main.js) is as follows:

var app = angular.module("app",[]);
app.config(['$httpProvider', function($httpProvider) {
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
]);

app.controller("AppCtrl", function ($scope, $http) {
    var postData = "username=demo&password=demo";
    $http.post("http://sampleurl.com/login",postData).success(function(data, status, headers, config)
    {
        console.log(data);
    });

});

The Index.html file is:

<!DOCTYPE html>
<html>
<head>
    <title>Sample Angular App</title>
</head>

<body ng-app="app" ng-controller="AppCtrl as app">

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>

<script src="main.js"></script>
</body>
</html>

The error I get is the following:

Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I have tried running this request using Ajax and it works just fine with Ajax. For some reason can't get this to work using Angular. Any idea as to what I am doing wrong here?

Thanks!

user1748009 · Accepted Answer · 2014-01-10 10:50:51Z

4

Ok. So basically after alot of tinkering around I realised that params were not getting passed using

  $http.post("http://sampleurl.com/login",postData)

So I rewrote this request as follows:

 $http({
    url:'http://sampleurl.com/api',
    method:"POST",
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: postData
  })

This got the request to go through just fine. Hope this is of help to someone else.

Cheers!

answered Jan 10, 2014 at 10:50

user1748009

1632 silver badges9 bronze badges

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

1 Comment

Clint Eastwood Over a year ago

Man, you made my day so much! I was struggling badly with this issue!!! Thanks, thanks! (PS: the are some "angles" from Angular that I don't like much :-D )

Mathew Berg · Accepted Answer · 2014-01-09 13:27:20Z

2

There are two things you will need to do, in the .config you need to put this:

$httpProvider.defaults.withCredentials = true;

And then on your server you need to return an an Access-Control-Allow-Origin header, it would possibly look like this:

Access-Control-Allow-Origin:http://URL_OF_SITE_YOUR_ANGULARJS_APP_IS_AT

answered Jan 9, 2014 at 13:27

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

2 Comments

user1748009 Over a year ago

Hey @Matthew, Thanks for this. I added the .withCredentials line and at least the No 'Access-Control-Allow-Origin' header error has gone. After running the code again I see an OPTIONS return in console which is weird as the request is a POST. I examined the request, and the Origin is set to NULL. On the server side, have programmed "Access-Control-Allow-Origin": "*",

Mathew Berg Over a year ago

That's how CORS works, there will be an options request. en.wikipedia.org/wiki/CORS

user2153885 · Accepted Answer · 2014-08-19 06:29:20Z

0

If you want to send a CORS request 'withCredentials', you'll need to have your server reply with 'Access-Control-Allow-Origin':'http(s)://your.request.origin'. A wildcard (*) reply will be refused by most browsers for requests with credentials.

answered Aug 19, 2014 at 6:29

user2153885

611 silver badge1 bronze badge

Comments

Sohail · Accepted Answer · 2015-03-13 16:04:35Z

0

I was stuck with the same issue, then I read from this link: http://better-inter.net/enabling-cors-in-angular-js/

and things worked like a charm :)

var myApp = angular.module('myApp', [
    'myAppApiService']);

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

answered Mar 13, 2015 at 16:04

Sohail

4,6162 gold badges40 silver badges44 bronze badges

Comments

BERGUIGA Mohamed Amine · Accepted Answer · 2015-08-15 21:44:29Z

0

I had the same problem before and I resolve it by adding this header:

headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },

answered Aug 15, 2015 at 21:44

BERGUIGA Mohamed Amine

6,3203 gold badges43 silver badges42 bronze badges

Collectives™ on Stack Overflow

Can't perform CORS request using Angularjs

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related