Comment implémenter la configuration de partage de ressources d'origine croisée (CORS) Nginx

Comment implémenter la configuration de partage de ressources inter-domaines (CORS) de Nginx nécessite des exemples de code spécifiques

Avec la popularité du développement de séparation front-end et back-end, les problèmes de partage de ressources inter-domaines (CORS) sont devenus courants défi. Dans le développement Web, en raison des restrictions de la politique de même origine du navigateur, le code JavaScript côté client ne peut demander des ressources qu'avec le même nom de domaine, le même protocole et le même port que la page sur laquelle il se trouve. Cependant, dans le développement réel, nous devons souvent demander des ressources à différents noms de domaine ou sous-domaines. À l’heure actuelle, vous devez utiliser CORS pour résoudre les problèmes inter-domaines.

Nginx est un puissant logiciel de serveur Web open source qui peut être configuré en tant que serveur proxy inverse pour fournir des ressources statiques et des requêtes proxy. La mise en œuvre de la configuration CORS dans Nginx peut résoudre les problèmes inter-domaines front-end. Ci-dessous, nous présenterons en détail comment configurer et implémenter CORS dans Nginx.

Tout d'abord, ajoutez le bloc de code suivant dans le fichier de configuration Nginx :

location / {
    if ($request_method = 'OPTIONS') {
        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-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    if ($request_method = 'GET') {
        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';
    }
    if ($request_method = 'POST') {
        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';
    }
}

Dans le code ci-dessus, nous utilisons la directive add_header pour définir les informations d'en-tête de réponse et implémenter la configuration CORS. Plus précisément, l'en-tête Access-Control-Allow-Origin est défini sur *, indiquant que toutes les origines sont autorisées. Ensuite, nous définissons l'en-tête Access-Control-Allow-Methods pour autoriser les méthodes de requête à être GET, POST et OPTIONS. Ensuite, afin de prendre en charge les requêtes dont contentType est application/json et d'autres formats, nous définissons l'en-tête Access-Control-Allow-Headers. Enfin, nous utilisons l'en-tête Access-Control-Expose-Headers pour définir les en-têtes de requête que le serveur peut renvoyer. add_header指令来设置响应头信息，实现CORS配置。具体来说，设置了Access-Control-Allow-Origin头为*，表示允许所有来源。然后，我们设置了Access-Control-Allow-Methods头，允许请求方法为GET、POST和OPTIONS。接下来，为了支持contentType为application/json等格式的请求，我们设置了Access-Control-Allow-Headers头。最后，我们使用Access-Control-Expose-Headers头来设置服务器可以返回的请求头。

接下来，重新启动Nginx服务器，使配置生效。

配置完成后，Nginx会根据设置的相应头信息，在响应中添加CORS相关的头部信息。这样，当浏览器发起跨域请求时，服务器会返回这些头部信息，浏览器就能正常处理跨域请求了。

需要注意的是，由于CORS配置的开放性，可能存在安全风险。如果有必要，可以根据具体的业务需求，限制Access-Control-Allow-Origin

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!