AngularJS，PHP宁静的一个Cors问题 [英] AngularJS, PHP Restful Cors issue

问题描述

我有一个问题，试图让一个$ HTTP调用到我的休息PHP服务器。
我在做跨域调用从客户端到后端。

I have an issue trying to make an $http call to my rest php server. I'm doing cross domain calls from the client to the backend.

从我的角度范围内的应用程序，这是$ http服务是如何配置的：

From within my Angular app this is how the $http service is configured:

.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('httpResponseInterceptor');
    $httpProvider.interceptors.push('httpTimeStampMarker');
    $httpProvider.defaults.useXDomain = true;
    $httpProvider.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    delete $httpProvider.defaults.headers.common['Content-Type, X-Requested-With'];
}])

这是怎么了实际的$ http.post（）配置：

This is how the actual $http.post() is configured:

    // Set the headers
    var headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': '*'
    };

    return $http({
            method: "POST",
            url: base_url,
            data: $.param(args),
            headers: headers
        })
        .success(function(data, status) {

        })
        .error(function(data, status) {

        });

这是服务器的的.htaccess：

This is the .htaccess of the server:

# Cors
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin, Access-Control-Allow-Methods"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

在preflight请求转到罚款：

The preflight request goes fine:

**Request headers:**
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-methods, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:***
Origin:***
Referer:***
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

**Response headers**
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin, Access-Control-Allow-Methods
Access-Control-Allow-Methods:PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Allow:OPTIONS,GET,HEAD,POST
Connection:Keep-Alive
Content-Length:0
Content-Type:httpd/unix-directory
Date:Fri, 26 Dec 2014 07:12:24 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.9 (Unix) PHP/5.6.2

但实际的POST请求失败：

However the actual post request fails:

XMLHttpRequest cannot load http://***/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '***' is therefore not allowed access. The response had HTTP status code 404.

这是请求和响应头：

These are the request and response headers:

**Request headers**
    Accept:*
    Accept-Encoding:gzip, deflate
    Accept-Language:en-US,en;q=0.8
    Access-Control-Allow-Methods:POST, GET, OPTIONS, PUT
    Access-Control-Allow-Origin:*
    Connection:keep-alive
    Content-Length:130
    Content-Type:application/x-www-form-urlencoded
    Host:***
    Origin:http://***
    Referer:***
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36


**Response headers**
Connection:Keep-Alive
Content-Length:198
Content-Type:text/html; charset=iso-8859-1
Date:Fri, 26 Dec 2014 07:12:24 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.4.9 (Unix) PHP/5.6.2

我显然缺少一些头在关闭后请求的响应。

I'm obviously missing some headers in the response off the post request.

但它的失败在这个问题上确实在preflight要求的工作。我试着在其他服务器上的index.php文件添加一些报头，但该请求不到达那里，并得到早期卡住（我猜当的.htaccess加载）。

However the issue it's failing on does work in the preflight request. I've tried adding some headers in the index.php of the rest server, but the request doesn't arrive there and gets stuck earlier (I'm guessing when the .htaccess is loaded).

我是什么在这里失踪？

推荐答案

在几个小时后，我终于找到了出来。

After a few hours I finally found it out.

我的.htaccess：

My .htaccess:

# Cors
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin"
Header always set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

该提示@Alexey罗丹了几乎是正确的。而不是改变的添加到设置，它应被设置为总是设置

The hint @Alexey Rodin gave was almost the right one. Instead of changing "add" to "set" it should be set to "always set".

这网站帮了我：

关于AngularJS，我可以证实，不需要其他设置CORS工作。
所以角的$ HTTP不需要用头改变左右，默认的设置应与上述的的.htaccess项工作。

Regarding AngularJS, I can confirm that no other settings are needed for CORS to work. So Angular's $http does not need the be changed with headers or so, the default settings should work with the .htaccess entries stated above.

这篇关于AngularJS，PHP宁静的一个Cors问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！