Response with 422 status code from nginx lacks 

问题:

nginx config as follows:

server {
            listen 80;
            listen [::]:80;

            add_header 'Access-Control-Allow-Origin' $http_origin;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT, PATCH';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Max-Age' 1728000;

            server_name erp.dev.thinkerx.com;
            access_log  /home/thinkerx/nginx/access.log;
            error_log /home/thinkerx/nginx/error.log;
            location ~ /.well-known {
                    allow all;
            }

            # The rest of your server block
            root /usr/share/nginx/html/men2017-back-dev/public;
            index index.html index.htm index.php;

            location /api/ {
                    try_files $uri $uri/ /index.php$is_args$args;
            }

            location ~ \.php$ {
                            try_files $uri /index.php =404;
                            fastcgi_pass 127.0.0.1:9000;
                            fastcgi_index index.php;
                            fastcgi_buffers 16 16k;
                            fastcgi_buffer_size 32k;
                            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                            include fastcgi_params;
                    }
    }

js code as follows:

$.ajax({
    type: 'post',
    dataType: 'json',
    contentType: 'application/json; charset=UTF-8',
    url: "http://erp.dev.thinkerx.com/api/external/material/catalogs",
    data: JSON.stringify({
        domain_id: 2222,
        code:'X01',
        name:'123063'
    }),
    success: function (response) {
        console.log(response);      
    },
    error: function (xhr, status, error) {
        console.log(xhr, status, error);    
    },
});

then, send request in browser, chrome console shows two request. The first request is preflight, method is OPTION. The second is real request and has response, whose status code is 201. preflight request

{"data":{"id":"16b7d6a0-9eb6-42ca-9ddb-fc61f5e082c0","domain_id":2222,"name":"1230464","code":"X01","parent_id":null,"created_at":1504698369,"updated_at":1504698369}}

As above, the thing is expected, but i update ajax data.

$.ajax({
    type: 'post',
    dataType: 'json',
    contentType: 'application/json; charset=UTF-8',
    url: "http://erp.dev.thinkerx.com/api/external/material/catalogs",
    data: JSON.stringify({
        domain_id: 2222,
        code:'X01',
        // name:'123063'
    }),
    success: function (response) {
        console.log(response);      
    },
    error: function (xhr, status, error) {
        console.log(xhr, status, error);    
    },
});

i send the request again.Accidentally, the error occurred. also two requests, the second status code is 422

{"message":"Validation Failed","errors":[["Key name must be present"]],"status_code":422}

XMLHttpRequest cannot load http://erp.dev.thinkerx.com/api/external/material/catalogs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 422.

I has some questions as follows:

1. Why report same origin policy error?
2. I see the response in console, why ajax xhr.responseJSON is undefined? How to fetch the response?

回答1:

I had same issue. Problem is that nginx add header only for 200, 204, 301, 302 and 304 status codes.

To get same headers for every type of status codes you have to add [always] in the end of add_header directive like this.

add_header 'Access-Control-Allow-Origin' $http_origin always;

Hope it will help you)