请求的资源上没有“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.

当我尝试从我的代码中运行我的网络服务时，我收到了这个错误。我试图找到它并尝试了许多我在网上找到的建议的解决方案。粘贴下面的代码。

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

和controller form对应的js是：

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

当我从 URL 栏中点击它时，网络服务工作正常。如何解决问题？请帮忙！

Answer 1

Chrome Webstore 有一个扩展程序，当页面中有异步调用尝试访问与您不同的主机时，该扩展程序会为您添加“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 请求并且必须为此进行配置。

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

您还需要配置您的网络服务 - 详细信息将取决于您使用的服务器端语言。如果您使用网络监控工具，您将看到它最初发送一个 OPTIONS 请求。您的服务器需要做出适当的响应以允许 CORS 请求。

它在你的浏览器中工作的原因是因为它没有发出跨域请求 - 而你的 Angular 代码是。

Answer 4

我在下面有一个解决方案，它对我有用：

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.

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

Answer 6

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

Answer 7

我明白了

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

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

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

Answer 8

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

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

Answer 9

将get替换为jsonp：

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

Answer 10

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

例如：@CrossOrigin(origins = "http://localhost:8080")

Answer 11

如果您使用的是 chrome：尝试使用 args 打开 chrome 以禁用网络安全，如下所示：

Disable same origin policy in Chrome

Answer 12

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

1) 转到您的桌面

2) 右键单击​​桌面并在弹出的下拉对话框中查找“NEW”，它将展开

3) 选择快捷方式

4) 将打开一个对话框

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

6) 点击确定->下一步->完成，它将在您的桌面上创建谷歌快捷方式

7) 现在右键单击您刚刚创建的 Google Chrome 图标

8) 点击属性

9) 在目标路径中输入这个

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

10) 保存

11) 双击您新创建的 chrome 快捷方式并在地址栏中粘贴您的链接，它将起作用。