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.

当我尝试从代码中运行我的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);
        });
    }
}]);

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

Answer 1

Chrome网上应用店有一个扩展程序，当您尝试访问与您的主机不同的主机页面中存在异步调用时，会为您添加“Access-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 .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代码是。

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”中必须有一个回调参数，该参数会返回带有数据的 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'标题存在

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

当我添加一个有效的路径时，例如， https://misty-valley-1234.herokuapp.com/messages。使用GET请求它可以以任何方式工作，但是使用POST响应它只能使用添加的路径。

Answer 8

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

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（originins =“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）点击Ok-＆gt; Next-＆gt; Finish，它将在桌面上创建google快捷方式

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

8）点击属性

9）在目标路径中输入

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

10）保存

11）双击新创建的镀铬快捷方式并通过地址栏中的链接，它将起作用。

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

12 个答案: