即使允许,交叉源POST请求也不能正常工作(GET工作)

问题描述:

我有一个奇怪的问题。我正在测试这个使用Angular.js 1.2.15。即使允许,交叉源POST请求也不能正常工作(GET工作)

我想发送一个POST请求到另一个域上的RESTful API后端(我想直接使用$ http而不是$ resource)。

var mapData = { 
'some': 'keys', 
'other': 'keys' 
} 
$http.post(endPoint, mapData); 

这是发生的情况:一个OPTIONS请求首先被发送,具有以下请求报头:

OPTIONS /api/maps HTTP/1.1 

Host: myhost.com 

Connection: keep-alive 

Access-Control-Request-Method: POST 

Origin: http://0.0.0.0:9000 

User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/36.0.1985.125 Chrome/36.0.1985.125 Safari/537.36 

Access-Control-Request-Headers: accept, content-type 

Accept: */* 

Referer: http://0.0.0.0:9000/ 

Accept-Encoding: gzip,deflate,sdch 

Accept-Language: en-US,en;q=0.8 

响应清楚地表明,从其他来源,并与每一个方法的请求被允许:

HTTP/1.1 204 No content 

Server: Varnish 

Connection: keep-alive 

Access-Control-Allow-Origin: * 

Access-Control-Allow-Credentials: true 

Access-Control-Allow-Methods: * 

Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type 

Access-Control-Max-Age: 0 

Content-Type: text/plain charset=UTF-8 

Accept-Ranges: bytes 

Date: Tue, 02 Sep 2014 14:50:16 GMT 

X-Varnish: 166874803 

Age: 0 

Via: 1.1 varnish 

Connection: close 

Cache-Control: max-age=0, private 

X-Varnish-Cache: MISS 

但是,然后,浏览器甚至不会发送POST请求(Chromium 36),即它不会在开发控制台的网络选项卡中显示POST请求。 相反,以下是显示在控制台:现在 XMLHttpRequest cannot load http://myhost.com/api/maps. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:9000' is therefore not allowed access.

,什么是完全不可思议:GET请求相同的API的工作,而不是由一个OPTIONS请求之前(或者它不是在网络中所示标签)。

HTTP/1.1 304 Not Modified 

Server: nginx/1.4.7 

Content-Type: application/json; charset=utf-8 

Status: 200 OK 

X-UA-Compatible: IE=Edge,chrome=1 

ETag: "baca3b7547fed3377088eb81fe083ff8" 

X-Request-Id: b2552dc4fdef2541c841e3d5e12d337e 

X-Runtime: 0.110003 

X-Rack-Cache: miss 

Access-Control-Allow-Origin: * 

Access-Control-Allow-Credentials: true 

Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS 

Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type 

Accept-Ranges: bytes 

Date: Tue, 02 Sep 2014 14:54:31 GMT 

X-Varnish: 166874831 166874142 

Age: 6223 

Via: 1.1 varnish 

Connection: keep-alive 

Cache-Control: max-age=0, private 

X-Varnish-Cache: HIT 

我真的不知道问题可能在这里。这是Angular的实现吗?或者它是服务器上的配置错误?负责API的人告诉我,它通常可以与他们的所有网络应用程序一起工作。

据我所知,这是一个CORS问题,我不是专家,但嘿,Access-Control-Allow-Origin: *应该做的伎俩,不应该吗?

UPDATE:它使用普通XMLHttpRequest时的工作原理:

var http = new XMLHttpRequest(); 
var url = endPoint; 
var params = JSON.stringify(mapData); 
http.open("POST", url, true); 

,我收到了200回。 这是怎么回事?

+0

[以$ http.get从API Angular.js地方发展(的可能重复http://*.com/questions/25568211/angular-js-local-development-with-http-get- from-api) – XGreen 2014-09-02 15:41:42

+0

不,当然不是。首先,我们的服务器配置为CORS,因为它可以与其他应用程序一起使用。其次,我甚至根据你指出的答案配置了$ httpProvider,就像有人说,在Angular> 1.2中不再需要它。 – wnstnsmth 2014-09-02 15:43:59

Nginx必须与http://nginx.org/en/docs/http/ngx_http_headers_module.html编译为访问控制允许来源:*工作。你有没有安装这个模块?

location/{ 
    add_header Access-Control-Allow-Origin *; 
} 
+0

我会仔细检查这一点,但GET-Request的工作原理也是交叉原点,所以我假设:是的。 – wnstnsmth 2014-09-02 15:24:41