CODEWITHSUNDEEP
angularjs
user1748009
user1748009

Reputation: 163

Can't perform CORS request using Angularjs

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!

Upvotes: 1

Views: 3708

Answers (5)

BERGUIGA Mohamed Amine
BERGUIGA Mohamed Amine

Reputation: 6300

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

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

Upvotes: 0

Sohail
Sohail

Reputation: 4586

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'];
    }
]);

Upvotes: 0

user2153885
user2153885

Reputation: 61

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.

Upvotes: 0

user1748009
user1748009

Reputation: 163

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!

Upvotes: 4

Mathew Berg
Mathew Berg

Reputation: 28750

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

Upvotes: 2

Related Questions