angular js nginx cors - No 'Access-Control-All

问题:

I know different versions of this same question have been asked, I have read all of the related questions and answers I could find on SO and Google.

I am trying to make a cross domain request from an angularJS app to an nginx server. All of the GET requests behave properly but my POST request does not.

Chrome was giving me a 'Access-Control-Allow-Origin' error so I added the following to my nginx server config:

location / {

if ($http_origin ~* (https?://.*\.mysite\.com(:[0-9]+)?)) {
    set $cors "true";
}

if ($request_method = 'OPTIONS') {
    set $cors "${cors}options";  
}

# non-OPTIONS indicates a normal CORS request
if ($request_method = 'GET') {
    set $cors "${cors}get";  
}
if ($request_method = 'POST') {
    set $cors "${cors}post";
}

# if it's a GET or POST, set the standard CORS responses header
if ($cors = "trueget") {
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    #add_header 'Access-Control-Allow-Credentials' 'true';
}

if ($cors = "truepost") {
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    #add_header 'Access-Control-Allow-Credentials' 'true';
}

if ($cors = "trueoptions") {
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    #add_header 'Access-Control-Allow-Credentials' 'true';

    #
    # Return special preflight info
    #        
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';
    add_header 'Content-Length' 0;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    return 204;
}
}

the OPTIONS request returns status of 204 and the added headers as expected:

Request URL:<code>http://otherSite/shfofx/PHP/Add/addTrade</code>
Request Method:OPTIONS
Status Code:204 No Content
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, x-requested-with, content-type
Access-Control-Request-Method:POST
AlexaToolbar-ALX_NS_PH:AlexaToolbar/alxg-3.2
Cache-Control:no-cache
Connection:keep-alive
Host:otherSite
Origin:<code>http://test-shf.mysite.com</code>
Pragma:no-cache
Referer:<code>http://test-shf.mysite.com/portfolio</code>
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like    Gecko) Chrome/31.0.1650.63 Safari/537.36
Response Headersview source
Access-Control-Allow-Headers:Authorization,Content-Type,Accept,Origin,User-   Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With,Keep-Alive,If-Modified-Since
Access-Control-Allow-Methods:GET, POST, OPTIONS
Access-Control-Allow-Origin:<code>http://test-shf.mysite.com</code>
Access-Control-Max-Age:1728000
Connection:keep-alive
Content-Length:0
Content-Type:text/plain charset=UTF-8
Date:Thu, 02 Jan 2014 22:54:58 GMT
Server:nginx/1.2.6 (Ubuntu)

Then I see a network call with the POST request in the Chrome network tab that is cancelled with the following console output:

XMLHttpRequest cannot load <code>http://otherSite/shfofx/PHP/Add/addTrade</code>. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://test-shf.mysite.com' is therefore not allowed access.

the header info for the cancelled POST request is:

Request URL:<code>http://otherSite/shfofx/PHP/Add/addTrade</code>
Request Headers
Accept:application/json, text/plain, */*
Cache-Control:no-cache
Content-Type:application/json;charset=UTF-8
Origin:<code>http://test-shf.mysite.com</code>
Pragma:no-cache
Referer:<code>http://test-shf.mysite.com/portfolio</code>
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
{UserFIID:0, FinancialInstID:4, FinancialInstName:undefined, UserID:1, SHFUserID:1,…}

Why is the preflight OPTIONS request allowed but my POST request cancelled?

回答1:

so the answer was simple and annoying.

My dev server was configured to allow loosely interpreted filenames, so:

Request URL:http://otherSite/shfofx/PHP/Add/addTrade

would resolve to addTrade.php, and the code would be executed as expected. In my test server, however, the server is configured to only return the exact case sensitive page requested. So, the POST request was returning a status of '404 Not Found'.

To make matters worse, Chrome's network tab did not relay the 404 response just the 'Access-Control-Allow-Origin' error. It wasn't until I inspected the server response firefox that I was able to determine and resolve the issue.

I simply changed:

Request URL:http://otherSite/shfofx/PHP/Add/addTrade

to:

Request URL:http://otherSite/shfofx/PHP/Add/addTrade.php

and that was it.