The requested resource does not have the header "Access-Control-Allow-Origin" - 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 start my web service from my code. I tried to find this and tried many of the solutions that were offered that I found on the net. Paste 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 the controller generates the corresponding js:

 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 the URL bar. How to solve a problem? Please, help!

Answer 1

The Chrome Web Store has an extension that adds the “Access-Control-Allow-Origin” header for you when there is an asynchronous call on the page that is trying to access a different host than yours.

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

Answer 2

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 means that the server you are making the request must allow the CORS request and must be configured to do this.

Answer 3

This is a CORS problem. There are several settings that you can change in angular - those that I usually set in the angular.config method (not all are CORS related):

 $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 web service - the details of this will depend on the language you use on the server side. If you use the network monitoring tool, you will see that it first sends an OPTIONS request. Your server must respond accordingly in order to resolve the CORS request.

The reason it works in your browser is because it does not make a cross-search request, whereas your code is angular.

Answer 4

I have a solution below and its work 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 ', the callback parameter must be needed, which returns JSON_CALLBACK with the data.
Below is an example of an example that works great

 $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); }); 

Output Example:

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

Answer 5

I added this and it worked for me.

web.api

 config.EnableCors(); 

Then you will name the model using cors:

In the controller, you add at the top for the global scope or for each class. It depends on you.

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

In addition, when you click this data on Angular, it wants to see the .cshtml file 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 someone, it took me a while to understand the Entity Framework, and why CORS is so useful.

Answer 6

In my case, I tried to get into the WebAPI service on localhost from inside an MVC application that used a lot of Angular code. My WebAPI service worked fine with Fiddler via http: // localhost / myservice . As soon as I spent a bit of time configuring the MVC application to use IIS instead of IIS Express (part of Visual Studio), it worked fine without adding any CORS-related configuration to any area.

Answer 7

Take a look at these discussions

Access-Control-Allow-Origin and Angular.js $ http

http://forum.rejectedsoftware.com/groups/rejectedsoftware.vibed/thread/10500/

Answer 8

I got

No header Access-Control-Allow-Origin

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

When I added the path that it worked, for example, https://misty-valley-1234.herokuapp.com/messages . It worked with GET requests anyway, but with POST responses it worked only with the added path.

Answer 9

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

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

Answer 10

Replace get with jsonp :

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

Answer 11

This is a server side issue. You must add your client address to your server’s open API. If you use Spring frame work, you can annotate @CrossOrgin from org.springframework.web.bind.annotation.CrossOrigin;

For example: @CrossOrigin (originins = " http: // localhost: 8080 ")

Answer 12

If you use chrome: try opening chrome with args to disable web security, as you see here:

Disable same origin policy in Chrome

Answer 13

Here's how it worked for me. For Windows users using Bracket and AngularJS

1) Go to the desktop

2) Right-click on the desktop and find "NEW" in the popup pop-up dialog box, and it will expand

3) Select "Shortcut"

4) A dialog box opens

5) Click Browse and find Google Chrome.

6) Click "OK" - "Next" - "Finish" and will create a Google shortcut on the desktop.

7) Now right-click the Google Chrome icon you just created.

8) Click Properties

9) Enter this in the target route

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

10) Save

11) Double-click on the newly created chrome shortcut and follow the link in the address bar, and it will work.