CORS, nginx via vagrant, and sites serve from browsersync

Question

Not sure what I'm doing wrong, but I cannot get my static html site served via browser sync to pull data from another site I am building served from vagrant.

So like, I have my static site served at 127.0.0.1:4000 trying to get some JSON data from example.loc/api/api.php?querystuff.

My nginx config for that site has

server {
    listen       80;
    listen       443 ssl;

    server_name  example.loc ~^example\.\d+\.\d+\.\d+\.\d+\.xip\.io$;

    # Tells nginx which directory the files for this domain are located
    root         /srv/www/example/htdocs/current;

    rewrite ^/(.*)/$ /$1 permanent;

    location /api/api.php {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' $http_origin;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' $http_origin;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' $http_origin;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }

    ...

    }
    ...
}

My static site is hitting the endpoint with:

var url ='http://example.loc/api/api.php?querystuff'
var xhr = new XMLHttpRequest();
if (!('withCredentials' in xhr)) xhr = new XDomainRequest(); // fix IE8/9
xhr.open('GET', url);
xhr.onload = success;
xhr.send();

And this is the response chrome is giving me:

Failed to load http://example.loc/api/api.php?api=line_status&line=red: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:4000' is therefore not allowed access.

What am I missing?

So isn’t the problem just that your nginx config doesn’t have `location /api/api.php` (which is the real path you need)? Instead it has `location /lib/api.php`. — sideshowbarker, Oct 27 '17 at 22:56
Yeah those were typos, the path used to be /lib/api.php but I have changed everything to /api/api.php. Even when I change the location block to `location /api/api.php {}` it still does not work. I just changed it in my nginx config, ran `nginx -t` to test it, and then restarted the service and I get the same error. — rugbert, Oct 27 '17 at 23:05
What’s the HTTP status code of the response? nginx won’t add headers to non-`2xx` responses unless you append the `always` keyword to the `add header` directive — sideshowbarker, Oct 27 '17 at 23:07

score 1 · Answer 1 · answered Oct 28 '17 at 13:03

After a good night's sleep I realized what the issue is, it was block order. My nginx config had another location block which started with:

location ~ \.php {}

Which took precedent over the location block I had listed above. I simply added an equal sign to my location block:

location = /api/api./php {}

And it now works.

For anyone else getting this problem, the following helped me:

CORS, nginx via vagrant, and sites serve from browsersync

1 Answers1