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服务时，会出现此错误。我试着找到它，并尝试了许多我在网上找到的解决方案。粘贴下面的代码。
<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栏点击该web服务时，它运行良好。如何解决问题？请帮忙！
Chrome Webstore有一个扩展，当页面中有异步调用试图访问与您不同的主机时，它会为您添加"Access Control Allow Origin"标头。
扩展名为：">允许控制允许原点：*"，这是链接：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
在客户端，您可以通过在AngularJS中启用cors请求
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
但是，如果这仍然返回错误，则意味着您发出请求的服务器必须允许CORS请求，并且必须为此进行配置。
这是一个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";
您还需要配置您的Web服务——这方面的详细信息将取决于您使用的服务器端语言。如果您使用网络监控工具，您会看到它最初会发送OPTIONS请求。您的服务器需要做出适当的响应以允许CORS请求。
它在你的浏览器中工作的原因是它没有发出跨源请求，而你的Angular代码是.
我下面有一个解决方案，它对我来说很有效：
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'必须需要一个回调参数，该参数返回带有数据的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!"}
我添加了这个，它对我来说很好。
web.api
config.EnableCors();
然后您将使用cors:调用该模型
在控制器中，您将在全局作用域的顶部或每个类上添加。这取决于你。
[EnableCorsAttribute("http://localhost:51003/", "*", "*")]
此外，当您将这些数据推送到Angular时，它希望看到也调用了.cs.html文件，或者它将推送数据，但不会填充您的视图。
(function () {
"use strict";
angular.module('common.services',
['ngResource'])
.constant('appSettings',
{
serverPath: "http://localhost:51003/About"
});
}());
//Replace URL with the appropriate path from production server.
我希望这能帮助到任何人，我花了一段时间才理解实体框架，以及为什么CORS如此有用。
在我的案例中，我试图从一个使用了大量Angular代码的MVC应用程序内部访问localhost上的WebAPI服务。我的WebAPI服务通过http://localhost/myservice.有一次我花了一点时间将MVC应用程序配置为使用IIS而不是IIS Express(Visual Studio的一部分)，它运行得很好，没有向任何区域添加任何与CORS相关的配置。
我得到
不存在"Access Control Allow Origin"标头
问题出在我提供的URL上。我提供的URL没有路由，例如https://misty-valley-1234.herokuapp.com/。
当我添加一条路径时，它起作用了，例如。，CCD_ 2。对于GET请求，它可以采用任何一种方式，但对于POST响应，它只能使用添加的路径。
对chrome使用此扩展。允许您从任何来源请求任何带有ajax的网站。添加到响应"允许控制允许来源：*"标题
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related
用jsonp替换get：
$http.jsonp('http://mywebservice').success(function ( data ) {
alert(data);
});
}
这是服务器端的一个问题。您必须将您的客户端地址添加到服务器公开的API中。如果你使用的是Spring框架，你可以从org.springframework.web.bind.annotation.CrossOrigin注释@CrossOrgin；
例如：@CrossOrigin(origins="http://localhost:8080")
如果您正在使用chrome：请尝试使用args打开chrome以禁用web安全，如您所见：
在Chrome 中禁用同源策略
这就是它对我的作用。对于使用Bracket和AngularJS 测试的Windows用户
1) 转到您的桌面
2) 右键单击桌面，在弹出的下拉对话框中查找"NEW"，它将展开
3) 选择快捷方式
4) 一个对话框将打开
5) 点击浏览并查找谷歌浏览器。
6) 单击确定->下一步->完成，它将在您的桌面上创建谷歌快捷方式
7) 现在右键点击你刚刚创建的谷歌浏览器图标
8) 点击属性
9) 在目标路径中输入
"C:Program FilesGoogleChromeApplicationchrome.exe" --args --disable-web-security
10) 保存
11) 双击你新创建的chrome快捷方式，经过地址栏中的链接，它就会工作。