来自nginx API端点的响应的“无访问控制允许原点” [英] ”No Access-Control-Allow-Origin” for response from nginx API endpoint

问题描述

我遇到的错误似乎是CORS问题。

The error I am getting seems to be a CORS issue.

我正尝试通过 HttpClient向RESTful API发出POST请求如下：

import {Component, OnInit} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {HttpClient, HttpParams, HttpHeaders} from "@angular/common/http";

import { Test }             from './test';
import { TestResponse }     from './test.response';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

import * as _ from 'lodash';

@Component({
    selector: 'my-tests',
    templateUrl: './tests.component.html',
    styleUrls: ['./tests.component.css']
})

export class TestsComponent implements OnInit {

    // URL to web api
    private url = 'http://172.19.0.5/api/tests';

    tests$: Observable<Test[]>;

    private httpheadersPost = new HttpHeaders().set("Content-Type", "application/json");

    constructor(private http:HttpClient) {
    }

    ngOnInit() {
        // console.log(this.httpheadersPost);
        this.tests$ = this.http
            .get<TestResponse[]>(this.url)
            .do(console.log)
            .map(data => _.values(data["hydra:member"]));
    }

    // Implementation of the add() function
    add(name: string): void {
        // console.log('header:'+this.httpheadersPost);
        // console.log(this.httpheadersPost);
      name = name.trim();
      if (!name) { return; }
      this.http.post(this.url, {"name":name}, {"headers":this.httpheadersPost} )
        .subscribe(
            val => {
                console.log("POST call successful value returned in body", val);
            },
            response => {
                console.log("POST call in error", response);
            },
            () => {
                console.log("The POST observable is now completed.");
            }
        );
    }


}

我的RESTful API的nginx服务器的配置：

This is the config of my nginx server of my RESTful API:

server {

    server_name symfony.dev;
    root /var/www/symfony/public;

    location / {
        add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization,Lang';
        #add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' 'POST,GET,PUT,DELETE,OPTIONS';
        add_header 'Access-Control-Allow-Origin' '*';
        try_files $uri /index.php$is_args$args;

    }

    location ~* \.(jpg|jpeg|gif|css|png|js|ico|html|eof|woff|ttf)$ {
        add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization,Lang';
        #add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' 'POST,GET,PUT,DELETE,OPTIONS';
        add_header 'Access-Control-Allow-Origin' '*';

        if (-f $request_filename) {
            expires 30d;
            access_log off;
        }
    }

    location ~ \.php$ {
        add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization,Lang';
        #add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' 'POST,GET,PUT,DELETE,OPTIONS';
        add_header 'Access-Control-Allow-Origin' '*';
        fastcgi_pass php:9000;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    error_log /var/log/nginx/symfony_error.log;
    access_log /var/log/nginx/symfony_access.log;
}

RESTful API和angular应用程序是通过创建的docker-compose ，因此容器的IP地址不同。

The RESTful API and the angular application are created through docker-compose so containers are not having the same IP addresses.

我得到的错误是：

**选项 http://172.19.0.5/api/测试 **

XMLHttpRequest无法加载 http://172.19.0.5/api/tests 。对预检请求的响应未通过访问控制检查：所请求的
资源中没有
Access-Control-Allow-Origin标头。因此，不允许
访问原始地址‘ http：// localhost：4203 。响应的HTTP状态代码为405。

XMLHttpRequest cannot load http://172.19.0.5/api/tests. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4203' is therefore not allowed access. The response had HTTP status code 405.

IMO中的错误很奇怪。实际上，我已经提供了RESTful API的标头 + nginx服务器具有 Access-Control-Allow-Origin

The error in IMO is strange. In fact, I already provided the headers + nginx server of the RESTful API is having Access-Control-Allow-Origin which is already set.

感谢您的帮助。

推荐答案

问题在于，CORS无法以这种方式工作。当浏览器要在API上测试CORS时，它将向其发送OPTIONS请求。该请求应使用CORS标头和http代码 204 进行响应。

Well the problem is that CORS doesn't work this way. When browser wants to test CORS on an API it will send a OPTIONS request to it. This request should respond with the CORS header and a http code 204.

所以您需要更新nginx配置如下所示。这不是确切的方法，但应该可以帮助您

So you would need to update you nginx config something like below. It is not exact, but should get you going

server {

    server_name symfony.dev;
    root /var/www/symfony/public;

    location / {

        # Match host using a hostname if you like
        #if ($http_origin ~* (https?://.*\.tarunlalwani\.com(:[0-9]+)?$)) {
        #   set $cors "1";
        #}
        set $cors "1";

        # OPTIONS indicates a CORS pre-flight request
        if ($request_method = 'OPTIONS') {
           set $cors "${cors}o";
        }

        # OPTIONS (pre-flight) request from allowed
        # CORS domain. return response directly
        if ($cors = "1o") {
           add_header 'Access-Control-Allow-Origin' '$http_origin' always;
           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
           add_header 'Access-Control-Allow-Credentials' 'true' always;
           add_header 'Access-Control-Allow-Headers' 'Origin,Content-Type,Accept' always;
           add_header Content-Length 0;
           add_header Content-Type text/plain;
           return 204;
        }

        add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization,Lang';
        #add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' 'POST,GET,PUT,DELETE,OPTIONS';
        add_header 'Access-Control-Allow-Origin' '*';
        try_files $uri /index.php$is_args$args;

    }

    location ~* \.(jpg|jpeg|gif|css|png|js|ico|html|eof|woff|ttf)$ {
        add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization,Lang';
        #add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' 'POST,GET,PUT,DELETE,OPTIONS';
        add_header 'Access-Control-Allow-Origin' '*';

        if (-f $request_filename) {
            expires 30d;
            access_log off;
        }
    }

    location ~ \.php$ {
        add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization,Lang';
        #add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' 'POST,GET,PUT,DELETE,OPTIONS';
        add_header 'Access-Control-Allow-Origin' '*';
        fastcgi_pass php:9000;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    error_log /var/log/nginx/symfony_error.log;
    access_log /var/log/nginx/symfony_access.log;
}

我最近使用了类似的配置为grafana启用CORS（Grafana无法通过AJAX进行回复）。所以这也应该对你有用

I recently used a similar config to enable CORS for grafana (No response from Grafana via AJAX). So this should work for you also

这篇关于来自nginx API端点的响应的“无访问控制允许原点”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！