Comment Nginx implémente-t-il l'accès entre domaines ? Implémentation de l'accès inter-domaines Nginx

Cet article vous présente comment Nginx implémente l'accès inter-domaines ? La mise en œuvre de l'accès inter-domaines Nginx a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

1. Qu'est-ce que le cross-domain

Le cross-domain fait référence à la demande de ressources d'un autre nom de domaine à partir d'une page Web d'un nom de domaine. Par exemple, demandez les ressources de www.b.com depuis la page www.a.com.

Les navigateurs interdisent généralement l'accès entre domaines par défaut. Parce qu’il n’est pas sécurisé, il est sujet aux attaques CSRF (cross-site request forgery).

2. Nginx contrôle le navigateur pour autoriser l'accès entre domaines

Nginx ajoute HTTP tel que Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow -En-têtes, etc. informations d'en-tête pour contrôler la mise en cache du navigateur.

"Access-Control-Allow-Origin" Définissez le site Web autorisé à lancer des requêtes inter-domaines
"Access-Control-Allow-Methods" Définissez les méthodes HTTP autorisées à lancer des requêtes inter-domaines requêtes de domaine
Le paramètre "Access -Control-Allow-Headers" permet aux requêtes inter-domaines d'inclure des en-têtes Content-Type

ngx_http_headers_module

Syntaxe

Syntax:    add_header name value [always];
Default:    —
Context:    http, server, location, if in location

Exemple d'application

1. vim conf.d/cross_site.conf

# 配置网站www.a.com
server {
    server_name www.a.com;
    root /vagrant/a;
    
    # 允许 http://www.b.com 使用 GET,POST,DELETE HTTP方法发起跨域请求
    add_header Access-Control-Allow-Origin http://www.b.com;
    add_header Access-Control-Allow-Method GET,POST,DELETE;
}

# 配置网站www.b.com
server {
    server_name www.b.com;
    root /vagrant/b;
}

# 配置网站www.c.com
server {
    server_name www.c.com;
    root /vagrant/c;
}

2. -s reload recharger le fichier de configuration nginx

3. Créer /vagrant/a/a.txt, /vagrant/b/index.html, /vagrant/c/index.html fichiers

• vim /vagrant/a/a.txt

Hello,I'm a!

• /vagrant/b/index.html

nbsp;html>

    
        <meta>
        <title>Ajax跨站访问b</title>
    
    
        <h1>Ajax跨站访问b - </h1>
    
    <script></script>
    <script>
    $(function(){
        $.ajax({
            url: "http://www.a.com/a.txt",
            type: "GET",
            success: function (data) {
                $(&#39;h1&#39;).append(data);
            },
            error: function (data) {
                $(&#39;h1&#39;).append(&#39;请求失败！&#39;);
            }
        });
    })
    </script>

• /vagrant/c/index.html

nbsp;html>

    
        <meta>
        <title>Ajax跨站访问c</title>
    
    
        <h1>Ajax跨站访问c - </h1>
    
    <script></script>
    <script>
    $(function(){
        $.ajax({
            url: "http://www.a.com/a.txt",
            type: "GET",
            success: function (data) {
                $(&#39;h1&#39;).append(data);
            },
            error: function (data) {
                $(&#39;h1&#39;).append(&#39;请求失败！&#39;);
            }
        });
    })
    </script>

4. Configurez le fichier hosts du client (si vous utilisez un vrai nom de domaine, vous pouvez l'ignorer)

windows : C:WindowsSystem32driversetchosts
linux : /etc/hosts

Ajoutez le contenu suivant et enregistrez-le (192.168.33.88 est l'IP de l'auteur machine virtuelle, vous devez la remplacer par votre propre IP) :

192.168.33.88 www.a.com
192.168.33.88 www.b.com
192.168.33.88 www.c.com

5. Visitez http://www.b.com/index.html et http://www.c.com/index.html

• http://www.b.com/index.html

Ajax跨站访问b - Hello,I'm a!

• http://www.c.com/index.html

Ajax跨站访问c - 请求失败！

Ouvrir Parcourir Dans la console du mode développeur du serveur, vous pouvez également trouver une erreur sur la page http://www.c.com/index.html :

Failed to load http://www.a.com/a.txt: The 'Access-Control-Allow-Origin' header has a value 'http://www.b.com' that is not equal to the supplied origin. Origin 'http://www.c.com' is therefore not allowed access.

Articles connexes recommandés :

Nginx sert de service Web de ressources statiques pour contrôler la mise en cache du navigateur et implémenter la protection contre les liens hypertextes

Nginx sert de un service Web de ressources statiques et effectue une compression des ressources statiques

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!