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

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网上应用店有一个扩展，增加了“访问控制允许来源”为你头时，有在页面异步调用试图访问一个不同的主机比你。

扩展名是：“ Allow-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 .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时，它还希望看到.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.

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

就我而言，我试图从使用大量Angular代码的MVC应用程序内部访问localhost上的WebAPI服务。我的WebAPI服务通过http：// localhost / myservice与Fiddler配合良好。一旦我花了一点时间将MVC应用程序配置为使用IIS而不是IIS Express（Visual Studio的一部分），它就可以正常工作，而无需在任何一个区域中添加任何与CORS相关的配置。

我有

不存在“ Access-Control-Allow-Origin”标头

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

当我添加路径时，例如 https://misty-valley-1234.herokuapp.com/messages。对于GET请求，它可以采用任何一种方式，但对于POST响应，则只能对添加的路径起作用。

将此扩展程序用于chrome。允许您从任何来源请求带有ajax的任何站点。添加到响应'Allow-Control-Allow-Origin：*'标头

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

替换get为jsonp：

 $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以禁用网络安全性，如下所示：

在Chrome中禁用同一来源政策

这就是它为我工作的方式。对于Windows用户，使用Bracket和AngularJS进行测试

1）转到桌面

2）右键点击您的桌面，然后在弹出的下拉对话框中查找“ NEW”，它将展开

3）选择快捷方式

4）将打开一个对话框

5）单击浏览，然后找到Google Chrome。

6）单击确定->下一步->完成，它将在您的桌面上创建Google快捷方式

7）现在，右键单击刚创建的Google Chrome浏览器图标

8）点击属性

9）在目标路径中输入

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

10）保存

11）双击您新创建的Chrome快捷方式，然后在地址栏中跳过您的链接即可使用。