角JS nginx的CORS - 无“访问控制允许来源”头 [英] angular js nginx cors - No 'Access-Control-Allow-Origin' header

问题描述

我知道不同版本的同一个问​​题一直在问的，我看过所有的相关的问题和答案我能找到的SO和谷歌。

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.

我试图让从angularJS应用跨域请求到服务器nginx的。所有GET请求，举止得体，但我的POST请求没有。

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的给我一个'访问控制允许来源，所以我增加了以下我的nginx服务器配置错误：

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;
}
}

OPTIONS请求返回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)

然后我看到在Chrome网络选项卡中的POST请求与以下控制台输出取消了网络呼叫：

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.

对于取消POST请求的头信息是：

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,…}

为什么preflight OPTIONS请求允许的，但我的POST请求取消？

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

推荐答案

所以答案很简单和恼人的。

so the answer was simple and annoying.

我的dev的服务器配置为允许松散间preTED文件名，所以：

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

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

将解析为addTrade.php，并如期code会被处决。在我的测试服务器，但是，服务器被配置为只返回请求的确切区分大小写页面。因此，POST请求返回的404未找​​到状态。

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'.

要更糟糕的是，Chrome的网络选项卡中并没有中继404回应只是访问控制允许来源的错误。但直到我检查了服务器响应的Firefox，我是能够确定并解决问题。

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.

我只是改变：

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

到

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

，就是这样。

这篇关于角JS nginx的CORS - 无“访问控制允许来源”头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！