No 'Access-Control-Allow-Origin' header is present on the requested resource- AngularJS

Question

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

I get this error when I try to run my web-service from inside my code. I tried finding about it and tried many solutions which were suggested which I found on net. Pasting the code below.

<form name="LoginForm" ng-controller="LoginCtrl" ng-submit="init(username,password,country)"> <label>Country</label><input type="text" ng-model="country"/><br/><br/> <label>UserName</label><input type="text" ng-model="username" /></br></br> <label>Password</label><input type="password" ng-model="password"> </br> <button type="submit" >Login</button> </form>

And controller form the corresponding js is:

app.controller('LoginController', ['$http', '$scope', function ($scope, $http) { $scope.login = function (credentials) { $http.get('http://mywebservice').success(function ( data ) { alert(data); }); } }]);

The web-service works fine when I hit it from URL bar. How to resolve the problem? Kindly help!

$http.get('mywebservice').success(function ( data ) { alert(data); }); } i think you miss "'" in url. — Shivkumar
– Shivkumar, Commented Jun 10, 2014 at 6:19

Patricio Córdova · Accepted Answer · 2015-07-10 16:08:02Z

26

The Chrome Webstore has an extension that adds the 'Access-Control-Allow-Origin' header for you when there is an asynchronous call in the page that tries to access a different host than yours.

The name of the extension is: "Allow-Control-Allow-Origin: *" and this is the link: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

edited Jul 10, 2015 at 16:08

answered Jul 9, 2015 at 19:26

Patricio Córdova

8299 silver badges14 bronze badges

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

8 Comments

Yar Over a year ago

this is by far the easiest answer for this question! thanks

Magus Over a year ago

this only works when you are developing, when you get your code to a server the code is going to appear again. Unless you are developing using ionic or phonegap which does this check using config.xml you will still need to set the headers on your angularjs code.

Vatsal Over a year ago

This is only a workaround, not a solution. It will work with development but once the code is deployed this issue has to be fixed. We cant expect every person using he website to have this plugin

Patricio Córdova Over a year ago

True, but the "No Access-Control-Allow-Origin" problem is supposed to happen mainly when you are developing from a local environment, and you are requesting a server outside of your network (developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). When you move your application to production you shouldn't have this problem. If your application runs from a different domain than your servers, you should configure your servers to allow CORS requests.

vigamage Over a year ago

@PatricioCórdova, I am new and have been developing my very first angular app with http. Currently I have both server and client running on my local host. server is on port 8080 and the client is on port 3000. I get the issue which is being discussed here. BTW, my question is, once I put my client and server into servers, will I be still getting the issue? I asking since u have mentioned that, this happens when we are developing in a local envionment.

|

ALi Mir · Accepted Answer · 2015-06-30 16:03:21Z

On the client side you can enable cors requests in AngularJS via

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

However if this still returns an error, this would imply that the server that you are making the request has to allow CORS request and has to be configured for that.

Lee Willis · Accepted Answer · 2014-06-10 09:31:24Z

This is a CORS issue. There are some settings you can change in angular - these are the ones I typically set in the Angular .config method (not all are related to CORS):

$httpProvider.defaults.useXDomain = true; $httpProvider.defaults.withCredentials = true; delete $httpProvider.defaults.headers.common["X-Requested-With"]; $httpProvider.defaults.headers.common["Accept"] = "application/json"; $httpProvider.defaults.headers.common["Content-Type"] = "application/json";

You also need to configure your webservice - the details of this will depend on the server side language you are using. If you use a network monitoring tool you will see it sends an OPTIONS request initially. Your server needs to respond appropriately to allow the CORS request.

The reason it works in your brower is because it isn't make a cross-origin request - whereas your Angular code is.

Nadimul De Cj · Accepted Answer · 2016-03-22 06:51:24Z

I have a solution below and its works for me:

app.controller('LoginController', ['$http', '$scope', function ($scope, $http) { $scope.login = function (credentials) { $http({ method: 'jsonp', url: 'http://mywebservice', params: { format: 'jsonp', callback: 'JSON_CALLBACK' } }).then(function (response) { alert(response.data); }); } }]);

in 'http://mywebservice' there must be need a callback parameter which return JSON_CALLBACK with data.
There is a sample example below which works perfect

$scope.url = "https://angularjs.org/greet.php"; $http({ method: 'jsonp', url: $scope.url, params: { format: 'jsonp', name: 'Super Hero', callback: 'JSON_CALLBACK' } }).then(function (response) { alert(response.data); });

example output:

{"name":"Super Hero","salutation":"Apa khabar","greeting":"Apa khabar Super Hero!"}

John Aldrin · Accepted Answer · 2015-10-14 19:48:03Z

I added this and it worked fine for me.

web.api

config.EnableCors();

Then you will call the model using cors:

In a controller you will add at the top for global scope or on each class. It's up to you.

 [EnableCorsAttribute("http://localhost:51003/", "*", "*")]

Also, when your pushing this data to Angular it wants to see the .cshtml file being called as well, or it will push the data but not populate your view.

(function () { "use strict"; angular.module('common.services', ['ngResource']) .constant('appSettings', { serverPath: "http://localhost:51003/About" }); }()); //Replace URL with the appropriate path from production server.

I hope this helps anyone out, it took me a while to understand Entity Framework, and why CORS is so useful.

user5373289 · Accepted Answer · 2015-09-24 17:30:06Z

In my case, I was trying to hit a WebAPI service on localhost from inside an MVC app that used a lot of Angular code. My WebAPI service worked fine with Fiddler via http://localhost/myservice. Once I took a moment to configure the MVC app to use IIS instead of IIS Express (a part of Visual Studio), it worked fine, without adding any CORS-related configuration to either area.

Wtower · Accepted Answer · 2015-09-06 07:28:50Z

I got

No 'Access-Control-Allow-Origin' header is present

and the problem was with the URL I was providing. I was providing the URL without a route, e.g., https://misty-valley-1234.herokuapp.com/.

When I added a path it worked, e.g., https://misty-valley-1234.herokuapp.com/messages. With GET requests it worked either way but with POST responses it only worked with the added path.

Amaru Hash · Accepted Answer · 2016-07-26 14:18:40Z

Use this extension for chrome. Allows to you request any site with ajax from any source. Adds to response 'Allow-Control-Allow-Origin: *' header

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

Travis Heeter · Accepted Answer · 2017-02-13 17:41:49Z

Replace get with jsonp:

 $http.jsonp('http://mywebservice').success(function ( data ) { alert(data); }); }

user8033402 · Accepted Answer · 2017-05-18 20:38:10Z

It is a problem on the server side. You have to add your client address to your server exposed API. If you are using Spring frame work you can annotate @CrossOrgin from org.springframework.web.bind.annotation.CrossOrigin;

Eg : @CrossOrigin(origins = "http://localhost:8080")

Community · Accepted Answer · 2017-05-23 10:31:30Z

-6

If you are using chrome: try open chrome with the args to disable web security like you see here:

Disable same origin policy in Chrome

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Sep 22, 2014 at 21:13

deividfortuna

1294 bronze badges

2 Comments

Scott Solmer Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post.

deividfortuna Over a year ago

Please take a look in this link: Understanding AJAX CORS and security considerations

Samuel Kwame Antwi · Accepted Answer · 2015-05-30 22:45:33Z

-10

This is how it worked for me. For Windows users testing with Bracket and AngularJS

1) Go to your desktop

2) Right click on your desktop and look for "NEW" in the popup drop down dialog box and it will expand

3) Choose Shortcut

4) A dialog box will open

5) Click on Browse and look for Google Chrome.

6) Click Ok->Next->Finish and it will create the google shortcut on your desktop

7) Now Right Click on the Google Chrome icon you just created

8) Click properties

9) Enter this in the target path

"C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security

10) Save it

11) Double click on your newly created chrome shortcut and past your link in the address bar and it will work.

answered May 30, 2015 at 22:45

Samuel Kwame Antwi

5955 silver badges10 bronze badges

5 Comments

Samuel Kwame Antwi Over a year ago

@XelharK what do you mean by not sure if trolling?

XelharK Over a year ago

This solution will basically disable security checks in your browser for development purposes. As long as you're going to use the script on your own computer it's fine, but 99% of the time, this problem happens when someone is developing an application that requires some server request, and he's likely to release the application to the public at some point. This solution will just make it work ON YOUR MACHINE, it's a simple temporary bypass of the problem, not a solution at all.

Samuel Kwame Antwi Over a year ago

@XelharK that was the point i was trying to arrive at. You should create two copies of your chrome application. One is the secured app for browsing the web and the other one for testing. I hope that helps to clearify things

XelharK Over a year ago

Sure, that would make it work, but only on your machine. If that's all you need then I guess this works, but the problem is still not solved, this is only a temporary way around it.

Samuel Kwame Antwi Over a year ago

@XelharK yes only on your local machine for local development and testing. I realized after deploying to production, it worked with the normal browser with the security settings because at that point i am accessing the application out side my local network and secured network and the server is sending back all the required header information

Collectives™ on Stack Overflow

No 'Access-Control-Allow-Origin' header is present on the requested resource- AngularJS

12 Answers 12

8 Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

2 Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

8 Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

2 Comments

5 Comments

Linked

Related