Comment implémenter la prise en charge du partage de ressources d'origine croisée (CORS) via le serveur proxy Nginx ?

Comment implémenter la prise en charge du partage de ressources d'origine croisée (CORS) via le serveur proxy Nginx ?

Introduction : 
Le partage de ressources cross-origine (CORS) est un mécanisme qui permet aux serveurs d'accorder l'accès à des ressources spécifiques lors du traitement de requêtes provenant de différentes sources (domaines, protocoles ou ports). Dans les applications pratiques, il est souvent nécessaire de réaliser le partage de ressources via le serveur proxy Nginx. Cet article explique comment prendre en charge CORS via la configuration Nginx.

Étape 1 : Installez et configurez Nginx

1. Installez Nginx
Tout d'abord, assurez-vous que Nginx est installé sur le serveur. S'il n'est pas installé, veuillez choisir la méthode d'installation appropriée en fonction du système d'exploitation.

2. Modifier le fichier de configuration Nginx
Utilisez un éditeur de texte pour ouvrir le fichier de configuration Nginx, généralement situé dans /etc/nginx/nginx.conf ou /etc/nginx/conf.d. /par défaut .conf. /etc/nginx/nginx.conf或/etc/nginx/conf.d/default.conf。

3.添加CORS配置
在配置文件的server块中添加以下代码，以启用CORS支持：

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, 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' '*';
        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-Expose-Headers' 'Content-Length,Content-Range';
    }
    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, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
}

以上配置将允许任何来源的请求进行跨域访问，并允许常见的请求方法（GET、POST、OPTIONS）。'Access-Control-Allow-Headers'指定了允许的请求头，'Access-Control-Expose-Headers'指定了允许的响应头。

4.保存并重启Nginx
保存配置文件，并重启Nginx服务，使配置生效。可以使用以下命令来重启Nginx：

sudo service nginx restart

步骤二：测试CORS支持

为了验证CORS配置的有效性，我们可以使用浏览器的开发工具来查看请求和响应头信息。

1.打开浏览器开发工具
在浏览器中打开开发者工具（一般是按F12键），切换到"Network"（网络）选项卡。

2.发送跨域请求
通过JavaScript代码或者直接在浏览器地址栏输入一个跨域地址，发送跨域请求。例如，假设我们的Nginx代理服务器的地址为http://example.com，并且我们要访问的跨域URL为http://api.example.com/data。

3.查看请求和响应头
在开发者工具的“Network”选项卡中，选中对应的请求，然后点击它以展开详细信息。可以在请求和响应的头部信息中找到Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers

3. Ajoutez la configuration CORS

Ajoutez le code suivant dans le bloc server du fichier de configuration pour activer la prise en charge CORS :
rrreee

La configuration ci-dessus permettra l'accès inter-domaines pour les requêtes de n'importe quelle origine et autoriser les méthodes de requête courantes (GET, POST, OPTIONS). « Access-Control-Allow-Headers » spécifie les en-têtes de requête autorisés et « Access-Control-Expose-Headers » spécifie les en-têtes de réponse autorisés. 🎜🎜4. Enregistrez et redémarrez Nginx🎜Enregistrez le fichier de configuration et redémarrez le service Nginx pour que la configuration prenne effet. Vous pouvez utiliser la commande suivante pour redémarrer Nginx : 🎜rrreee🎜Étape 2 : Tester le support CORS🎜🎜Afin de vérifier la validité de la configuration CORS, nous pouvons utiliser les outils de développement du navigateur pour afficher les informations d'en-tête de demande et de réponse. 🎜🎜1. Ouvrez les outils de développement du navigateur 🎜Ouvrez les outils de développement dans le navigateur (appuyez généralement sur la touche F12) et passez à l'onglet "Réseau". 🎜🎜2. Envoyer des requêtes inter-domaines🎜Envoyez des requêtes inter-domaines via le code JavaScript ou saisissez directement une adresse inter-domaines dans la barre d'adresse du navigateur. Par exemple, supposons que l'adresse de notre serveur proxy Nginx est http://example.com et que l'URL inter-domaines à laquelle nous souhaitons accéder est http://api.example. com/data. 🎜🎜3. Afficher les en-têtes de requête et de réponse🎜Dans l'onglet "Réseau" des outils de développement, sélectionnez la requête correspondante et cliquez dessus pour développer les détails. Vous pouvez trouver <code>Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers et d'autres informations d’en-tête pour confirmer la prise en charge de CORS. 🎜🎜Résumé : 🎜En configurant Nginx, nous pouvons facilement implémenter la prise en charge du partage de ressources inter-domaines (CORS). Ajoutez simplement des informations d'en-tête au fichier de configuration Nginx pour permettre au serveur proxy Nginx de prendre en charge CORS. Cela garantit que les requêtes inter-domaines fonctionnent correctement entre différents domaines. 🎜

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!