在请求的资源AngularJS上没有“Access-Control-Allow-Origin”标题

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. 

当我尝试从我的代码中运行我的Web服务时，出现此错误。 我试图find它，并尝试了许多解决scheme，这是我在网上find的build议。 粘贴下面的代码。

 <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> 

而控制器形成相应的js是：

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

当我从URL栏中findnetworking服务时，networking服务工作正常。 如何解决这个问题？ 请帮助！

Answer 1

Chrome网上应用店有一个扩展function，当您尝试访问不同于您的主机的网页中存在asynchronous呼叫时，会为您添加“Access-Control-Allow-Origin”标头。

扩展名是：“ Allow-Control-Allow-Origin：* ”，这是链接： https ： //chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Answer 2

在客户端，您可以通过AngularJS启用Cors请求

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

但是，如果这仍然返回一个错误，这将意味着您正在发出请求的服务器必须允许CORS请求，并且必须为此进行configuration。

Answer 3

这是一个CORS问题。 有一些设置可以在angular度上更改 – 这些是我通常在Angular.config方法中设置的（不是所有都与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"; 

您还需要configuration您的Web服务 – 这些的细节将取决于您使用的服务器端语言。 如果您使用networking监控工具，您将看到它最初发送OPTIONS请求。 您的服务器需要做出适当的响应以允许CORS请求。

它在你的浏览器工作的原因是因为它不是一个交叉来源的请求 – 而你的Angular代码是。

Answer 4

我有一个解决scheme，下面是我的作品：

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

在' http：// mywebservice '中必须有一个callback参数，它返回带有数据的JSON_CALLBACK 。
下面有一个示例示例，它是完美的

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

示例输出：

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

Answer 5

我加了这个，对我来说工作得很好。

web.api

 config.EnableCors(); 

然后你会使用cors来调用模型：

在控制器中，您将在全局范围或每个类的顶部添加。 随你便。

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

而且，当你将这些数据推送到Angular时，它也希望看到被调用的.cshtml文件，否则它将推送数据，但不会填充你的视图。

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

我希望这可以帮助任何人，我花了一段时间了解entity framework，以及为什么CORS是如此有用。

Answer 6

在我的情况下，我试图从使用了很多Angular代码的MVC应用程序中在本地主机上打一个WebAPI服务。 我的WebAPI服务可以通过http：// localhost / myservice和Fiddler一起工作。 一旦我花了一些时间来configurationMVC应用程序使用IIS而不是IIS Express（Visual Studio的一部分），它运行良好，没有添加任何区域的CORS相关的configuration。

Answer 7

看看这个讨论

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

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

Answer 8

我有

没有“Access-Control-Allow-Origin”标题存在

问题出在我提供的URL上。 我提供了没有路由的url，例如https://misty-valley-1234.herokuapp.com/ 。

当我添加了一个工作的path，例如， https://misty-valley-1234.herokuapp.com/messages : https://misty-valley-1234.herokuapp.com/messages 。 有了GET请求，它可以工作，但是POST响应只能用于添加的path。

Answer 9

使用此扩展名为铬。 允许你从任何来源请求任何网站的Ajax。 添加到响应“允许控制允许来源：*”标题

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

Answer 10

用jsonpreplaceget ：

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

Answer 11

这是服务器端的问题。 您必须将您的客户端地址添加到服务器公开的API。 如果您使用的是Spring框架，可以从org.springframework.web.bind.annotation.CrossOrigin注释@CrossOrgin;

例如：@CrossOrigin（origins =“ http：// localhost：8080 ”）

Answer 12

如果您正在使用chrome：请尝试使用args打开chrome以禁用networking安全，如下所示：

在Chrome中停用相同的原产地策略

Answer 13

这是如何为我工作。 对于使用Bracket和AngularJS进行testing的Windows用户

1）转到您的桌面

2）右键单击桌面，在popup的下拉对话框中查找“NEW”，它将展开

3）select快捷方式

4）打开一个对话框

5）点击浏览并寻找谷歌浏览器。

6）点击确定 – >下一步 – >完成，它会在您的桌面上创build谷歌快捷方式

7）现在右键单击刚刚创build的Google Chrome图标

8）点击属性

9）在目标path中input

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

10）保存

11）双击你新创build的Chrome快捷方式，并在地址栏中通过你的链接，它将工作。