크로스 원점 POST 요청이 허용 되더라도 작동하지 않음 (GET 작동)

Question

이상한 문제가 있습니다. Angular.js 1.2.15를 사용하여 테스트하고 있습니다.

다른 도메인의 RESTful API 백엔드로 POST 요청을 보내고 싶습니다. $ resource이 아닌 $ http를 직접 사용하고 싶습니다.

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

이

이 일어나는 것이다 :

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.

이제 완전히 이상한 무엇 : 같은 API 작업에 요청을 GET 및 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 다시 얻을. 여기에 무슨 일이 있습니까?

Answer 1

Nginx는 에 대해 http://nginx.org/en/docs/http/ngx_http_headers_module.html으로 컴파일해야합니다. 액세스 제어 허용 원점 : *. 이 모듈을 설치 했습니까?

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