javascript - CORS、通过 vagrant 的 nginx，以及通过 browsersync 提供服务的站点

Question

不确定我做错了什么，但我无法通过浏览器同步服务我的静态 html 网站，以从我正在构建的另一个由 vagrant 提供服务的网站中提取数据。

所以，我的静态站点位于 127.0.0.1:4000 上，尝试从 example.loc/api/api.php?querystuff 获取一些 JSON 数据.

我的该站点的 nginx 配置有

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

    ...

    }
    ...
}

我的静态站点正在通过以下方式访问端点:

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();

这是 chrome 给我的响应:

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.

我错过了什么？

Answer 1

睡了一夜好觉后，我意识到问题出在哪里，这是 block 订单。我的 nginx 配置有另一个位置 block ，其开头为:

location ~ \.php {}

这优先于我上面列出的位置 block 。我只是在位置 block 中添加了一个等号:

location = /api/api./php {}

现在它可以工作了。

对于遇到此问题的其他人，以下内容对我有帮助:

• Nginx location priority
• http://nginx.org/en/docs/http/ngx_http_core_module.html#location