Javascript $http';尽管启用了CORS,但仍无法工作
在深入研究angular之前,我在服务器上做了一个干净的测试,以检查我的CORS是否已启用。使用此脚本Javascript $http';尽管启用了CORS,但仍无法工作,javascript,angularjs,apache,cors,Javascript,Angularjs,Apache,Cors,在深入研究angular之前,我在服务器上做了一个干净的测试,以检查我的CORS是否已启用。使用此脚本 var xhr = new XMLHttpRequest(); var param = 'name=mrA'; xhr.open('POST','http://api.otamarket.local/api/cors.json',true); //Send the proper header information along with the r
var xhr = new XMLHttpRequest();
var param = 'name=mrA';
xhr.open('POST','http://api.otamarket.local/api/cors.json',true);
//Send the proper header information along with the request
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (this.status == 200 && this.readyState == 4) {
console.log('response: ' + this.responseText);
}
};
xhr.send(param);
正如你所看到的,它工作得很好
但是当我通过$http使用angular时
var http = "//api.otamarket.local/api/cors.json";
return $http.post(http,credentials);
我得到这个错误
以下是标题响应:
Remote Address:127.0.0.1:80
Request URL:http://api.otamarket.local/api/cors.json
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Request Headers view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:api.otamarket.local
Origin:http://otakuket.local
Referer:http://otakuket.local/
User-Agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Response Headersview source
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Length:0
Content-Type:text/html
Date:Fri, 28 Nov 2014 03:47:31 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.9 (Win32) OpenSSL/1.0.1g PHP/5.5.11
X-Powered-By:PHP/5.5.11
这就是我启用CORS的地方
<VirtualHost *:80>
DocumentRoot "C:\Users\aldri_000\SkyDrive\Program Experiment\websites\api.otamarket.local\public"
ServerName api.otamarket.local
Header set Access-Control-Allow-Origin "*"
<Directory "C:\Users\aldri_000\SkyDrive\Program Experiment\websites\api.otamarket.local">
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order Deny,Allow
Allow from all
Require all granted
</Directory>
</VirtualHost>
如您所见,我在apache服务器的vhost中启用了CORS。它是通过XHR工作的,我不明白为什么它在这里不工作
谢谢。您的错误消息清楚地表明该错误与CORS无关 它返回405,这意味着请求方法与服务器上定义的方法不匹配 正如您在标题中看到的,您的请求方法是OPTIONS,而我假设您的服务器方法是为POST设计的 交叉检查您是否编写了任何HTTP拦截器,或者某段代码是否正在更改您的请求头 另外,既然您正在检索数据,为什么不使用Get Request 请尝试以下代码段:
$http({method: 'GET', url: '//api.otamarket.local/api/cors.json'}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
}).
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
角度预处理先发送选项请求的POST/DELETE/GET/PUT请求。一旦服务器成功响应,说明服务器允许哪些方法,angular就会发出PUT/POST/XXX请求。当服务器从Angular接收选项时,它没有使用允许的请求类型响应 我明白了,在使用$http调用时,内容类型设置不正确。尝试向$http调用添加headers属性,如下所示
$http({
method: 'POST',
url: url,
data: $.param({fkey: "key"}),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})在服务器端我可以做些什么来允许它吗?这取决于您在服务器端实现中使用的技术。大多数支持http请求的服务器端语言都有一些方法来处理选项请求。您计划在服务器端实现什么语言?我们可能会为您指出一个好的docs.for Apache的方向?如何允许?Apache是您的web服务器软件。你的API是用什么编写的?我看到了url:这是NodeJSAPI吗?还是一个php API?或者一个???哦,这是PHP api。我在OP.Angular preflights$http请求上添加了API函数,首先使用http.OPTIONS。根据响应,他的服务器端实现需要使用$http的允许请求类型响应选项请求。问题:为什么数据属性需要在$.param下?这只是一个示例代码。您可以在该位置使用有效的json字符串。我传递了一个对象,但服务器似乎无法识别它。我从未尝试传递对象。但是,我想angular已经有了httprequest拦截器,它将把你的对象转换成一个有效的json字符串,并通过网络发送。您使用的是哪台服务器?服务器必须具有POST方法的处理程序。在方法中放入调试语句以获取post方法体(或)在浏览器开发工具中查看http请求的post体。。。
$http({
method: 'POST',
url: url,
data: $.param({fkey: "key"}),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}