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

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

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!