无法使用Angularjs执行CORS请求

问题描述：

我正在编写我的第一个AngularJS应用程序，并在Angular中遇到CORS问题。尝试了这个reply中提到的内容，但仍然没有解决这个问题的运气。无法使用Angularjs执行CORS请求

的JS代码（main.js）如下：

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

app.controller("AppCtrl", function ($scope, $http) { 
    var postData = "username=demo&password=demo"; 
    $http.post("http://sampleurl.com/login",postData).success(function(data, status, headers, config) 
    { 
     console.log(data); 
    }); 

});

index.html文件是：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sample Angular App</title> 
</head> 

<body ng-app="app" ng-controller="AppCtrl as app"> 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script> 

<script src="main.js"></script> 
</body> 
</html>

我得到的错误是：

Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我已经尝试过使用Ajax来运行这个请求，并且它在Ajax中工作得很好。出于某种原因，无法使用Angular获得此功能。任何想法，我在这里做错了吗？

谢谢！

答

好的。所以基本上围绕修修补补很多的后，我意识到，PARAMS并没有获得使用

$http.post("http://sampleurl.com/login",postData)

所以我改写了这个要求如下决议：

$http({ 
    url:'http://sampleurl.com/api', 
    method:"POST", 
    headers: { 
     'Content-Type': 'application/x-www-form-urlencoded' 
    }, 
    data: postData 
    })

这让经历就好了请求。希望这对别人有帮助。

干杯！

男人，你让我的日子变得如此之美！我在这个问题上苦苦挣扎!!!谢谢，谢谢！（PS：来自Angular的一些“角度”，我不太喜欢：-D） –

答

有两件事情你需要做的，在.config你需要把这样的：

$httpProvider.defaults.withCredentials = true;

然后在服务器上，你需要返回存取控制允许来源头，它可能看起来像这样：

Access-Control-Allow-Origin:http://URL_OF_SITE_YOUR_ANGULARJS_APP_IS_AT

嘿@Matthew，谢谢你。我添加了.withCredentials行，并且至少没有'Access-Control-Allow-Origin'标头错误消失了。再次运行代码后，我看到一个OPTIONS在控制台中返回，这很奇怪，因为请求是POST。我检查了请求，并将Origin设置为NULL。在服务器端，编程了“Access-Control-Allow-Origin”：“*”， – user1748009

这就是CORS的工作原理，会有一个选项请求。 HTTP：//en.wikipedia。org/wiki/CORS –

答

如果你想发送CORS请求“withCredentials”，你需要有“访问控制允许来源”服务器的回复：” HTTP（S）：//your.request .origin'。对于具有凭据的请求，通配符（*）回复将为拒绝由大多数浏览器拒绝。

答

我坚持了同样的问题，然后我从这个链接阅读： http://better-inter.net/enabling-cors-in-angular-js/

和事物工作就像一个魅力:)

var myApp = angular.module('myApp', [ 
    'myAppApiService']); 

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

答

我有同样的问题之前，我解决它通过添加此标头：

headers: { 
     'Content-Type': 'application/x-www-form-urlencoded' 
    },

无法使用Angularjs执行CORS请求

相关推荐