Guide de configuration de l'accès inter-domaines et de prise en charge du protocole CORS pour la configuration du serveur Nginx

Guide de configuration de l'accès inter-domaines pour la création de serveurs Nginx et de prise en charge du protocole CORS

Introduction :
Dans le développement actuel d'applications Web, les requêtes inter-domaines sont devenues une exigence courante. Pour garantir la sécurité, les navigateurs limitent par défaut les opérations inter-domaines via les requêtes AJAX. Le protocole CORS (Cross-Origin Resource Sharing) offre aux développeurs une solution fiable pour obtenir une autorisation contrôlable de l'accès entre domaines.

Nginx est un serveur Web et un serveur proxy inverse hautes performances. Cet article explique comment utiliser Nginx pour créer la configuration d'accès inter-domaines du serveur et la prise en charge du protocole CORS.

1. Configuration de l'accès inter-domaines au serveur
   Afin d'autoriser l'accès à partir d'autres noms de domaine, nous devons d'abord ajouter la configuration de l'accès inter-domaines au fichier de configuration Nginx. Ouvrez le fichier de configuration Nginx (généralement /etc/nginx/nginx.conf) et ajoutez la configuration suivante dans la section http :

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

La configuration ci-dessus permet l'accès depuis tous les noms de domaine (*) et prend en charge GET, POST et OPTIONS méthodes. Dans le même temps, nous spécifions également certaines informations d’en-tête de requête courantes.

Après avoir enregistré et quitté le fichier de configuration, rechargez la configuration Nginx pour la rendre efficace :

$ sudo nginx -s reload

2. Configurer la prise en charge du protocole CORS
   Après avoir ajouté la configuration d'accès inter-domaines au serveur, nous pouvons également configurer la prise en charge du protocole CORS de manière plus fine -manière granuleuse. Voici un exemple de configuration qui autorise uniquement l'accès inter-domaines aux noms de domaine spécifiés :

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

Dans la configuration ci-dessus, nous utilisons la directive map pour définir un $allowed_origin</code > variable, utilisant Utilisé pour stocker les noms de domaine qui autorisent l'accès entre domaines. <code>location / est configuré dans le bloc server, et la directive if est utilisée pour déterminer si le nom de domaine de la source de requête actuelle est dans le liste autorisée. Si tel est le cas, ajoutez les informations d’en-tête CORS correspondantes. De plus, nous pouvons également ajouter plus de règles selon nos besoins. map指令来定义一个$allowed_origin变量，用于存储允许跨域访问的域名。在server块中配置了location /，并通过if指令判断当前请求来源的域名是否在允许列表中。如果是，则添加相应的CORS头信息。此外，我们也可以根据自己的需要添加更多的规则。

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

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

Vérification en amont des requêtes CORS

Dans certains cas, les requêtes inter-domaines nécessitent des opérations de contrôle en amont. Par exemple, lorsque des informations d'en-tête de requête personnalisées ou des requêtes non simples (telles que PUT, DELETE, etc.) sont utilisées. Une demande de contrôle en amont est une demande OPTIONS envoyée avant la demande réelle pour obtenir l'autorisation du serveur pour la demande réelle.


Afin de prendre en charge les requêtes de contrôle en amont, il nous suffit d'ajouter la configuration suivante dans le bloc location/ :

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

Dans la configuration ci-dessus, lorsque la méthode de requête est OPTIONS, nous renvoyons 204 ( No Content ) et ajoutez les informations d'en-tête CORS.

Conclusion : 
• Avec la configuration ci-dessus, nous pouvons facilement créer la configuration d'accès inter-domaines du serveur et la prise en charge du protocole CORS. Qu'il s'agisse d'une simple requête inter-domaines ou d'une requête de contrôle en amont complexe, Nginx peut fournir des solutions flexibles et fiables.
• Références :
🎜[Documentation officielle Nginx](https://nginx.org/en/docs/)🎜🎜[Documentation officielle CORS](https://developer.mozilla.org/en-US/docs / Web/HTTP/CORS)🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!