Leitfaden zur domänenübergreifenden Zugriffskonfiguration und CORS-Protokollunterstützung zum Einrichten des Nginx-Servers

Anleitung zur domänenübergreifenden Zugriffskonfiguration und CORS-Protokollunterstützung zum Erstellen von Nginx-Servern

Einführung:
In der aktuellen Webanwendungsentwicklung sind domänenübergreifende Anforderungen zu einer häufigen Anforderung geworden. Um die Sicherheit zu gewährleisten, beschränken Browser standardmäßig domänenübergreifende Vorgänge über AJAX-Anfragen. Das CORS-Protokoll (Cross-Origin Resource Sharing) bietet Entwicklern eine zuverlässige Lösung, um eine kontrollierbare Autorisierung des domänenübergreifenden Zugriffs zu erreichen.

Nginx ist ein Hochleistungs-Webserver und Reverse-Proxy-Server. In diesem Artikel wird erläutert, wie Sie mit Nginx die domänenübergreifende Zugriffskonfiguration des Servers und die CORS-Protokollunterstützung erstellen.

1. Konfigurieren des domänenübergreifenden Zugriffs auf den Server
   Um den Zugriff von anderen Domänennamen aus zu autorisieren, müssen wir zunächst die domänenübergreifende Zugriffskonfiguration zur Nginx-Konfigurationsdatei hinzufügen. Öffnen Sie die Nginx-Konfigurationsdatei (normalerweise /etc/nginx/nginx.conf) und fügen Sie die folgende Konfiguration im http-Abschnitt hinzu:

http {
    ...
    
    # 允许跨域访问
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';
}

Die obige Konfiguration ermöglicht den Zugriff von allen Domänennamen (*) und unterstützt GET, POST und OPTIONS Methoden. Gleichzeitig geben wir auch einige allgemeine Informationen zum Anforderungsheader an.

Laden Sie nach dem Speichern und Beenden der Konfigurationsdatei die Nginx-Konfiguration neu, um sie wirksam zu machen:

$ sudo nginx -s reload

2. Cors-Protokollunterstützung konfigurieren
   Nachdem wir dem Server eine domänenübergreifende Zugriffskonfiguration hinzugefügt haben, können wir auch die CORS-Protokollunterstützung detaillierter konfigurieren -körnige Art und Weise. Das Folgende ist eine Beispielkonfiguration, die nur domänenübergreifenden Zugriff auf bestimmte Domänennamen ermöglicht:

http {
    ...
    
    # 配置CORS
    map $http_origin $allowed_origin {
        default "";
        ~^https?://(www.)?example.com$ $http_origin;
        ~^https?://(www.)?example.net$ $http_origin;
    }
    
    server {
        ...
        
        location / {
            if ($allowed_origin != "") {
                add_header 'Access-Control-Allow-Origin' $allowed_origin;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            }
            
            ...
        }
    }
}

In der obigen Konfiguration verwenden wir die map-Direktive, um einen $allowed_origin</code zu definieren > Variable, die zum Speichern von Domänennamen verwendet wird, die einen domänenübergreifenden Zugriff ermöglichen. <code>location / wird im server-Block konfiguriert und die if-Direktive wird verwendet, um zu bestimmen, ob sich der Domänenname der aktuellen Anforderungsquelle im befindet erlaubte Liste. Wenn ja, fügen Sie die entsprechenden CORS-Header-Informationen hinzu. Darüber hinaus können wir je nach Bedarf weitere Regeln hinzufügen. map指令来定义一个$allowed_origin变量，用于存储允许跨域访问的域名。在server块中配置了location /，并通过if指令判断当前请求来源的域名是否在允许列表中。如果是，则添加相应的CORS头信息。此外，我们也可以根据自己的需要添加更多的规则。

3. CORS请求的预检（preflight）
   在某些情况下，跨域请求需要进行预检操作。例如使用了自定义的请求头信息或非简单请求（例如PUT、DELETE等）时。预检请求是在实际请求之前发送的一种OPTIONS请求，用于获取服务器对实际请求的授权。

为了支持预检请求，我们只需要在location /

Preflight für CORS-Anfragen

In einigen Fällen erfordern domänenübergreifende Anfragen Preflight-Vorgänge. Zum Beispiel, wenn benutzerdefinierte Anfrage-Header-Informationen oder nicht einfache Anfragen (wie PUT, DELETE usw.) verwendet werden. Eine Preflight-Anfrage ist eine OPTIONS-Anfrage, die vor der eigentlichen Anfrage gesendet wird, um die Autorisierung des Servers für die eigentliche Anfrage zu erhalten.


Um Preflight-Anfragen zu unterstützen, müssen wir nur die folgende Konfiguration im location/-Block hinzufügen:

location / {
    ...
    
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $allowed_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        return 204;
    }
    
    ...
}

Nach dem Login kopieren

In der obigen Konfiguration geben wir 204 zurück, wenn die Anfragemethode OPTIONS ist ( Kein Inhalt) und fügen Sie CORS-Header-Informationen hinzu.

Fazit:
• Mit der obigen Konfiguration können wir die domänenübergreifende Zugriffskonfiguration des Servers und die CORS-Protokollunterstützung problemlos einrichten. Unabhängig davon, ob es sich um eine einfache domänenübergreifende Anfrage oder eine komplexe Preflight-Anfrage handelt, kann Nginx flexible und zuverlässige Lösungen bereitstellen.
• Referenzen:
🎜[Offizielle Nginx-Dokumentation](https://nginx.org/en/docs/)🎜🎜[CORS-Offizielle Dokumentation](https://developer.mozilla.org/en-US/docs / Web/HTTP/CORS)🎜🎜

Das obige ist der detaillierte Inhalt vonLeitfaden zur domänenübergreifenden Zugriffskonfiguration und CORS-Protokollunterstützung zum Einrichten des Nginx-Servers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!