Cinq solutions pour les sites Web multi-domaines

Étant donné que le navigateur utilise la politique de même origine, une requête inter-domaines est générée. Une page Web demande des ressources à une autre page Web avec un nom de domaine différent/un protocole différent/un port différent. Il s'agit d'un inter-domaine. Cet article propose 5 façons de résoudre le problème du cross-domain du site Web. Les amis intéressés peuvent y jeter un œil.

1. Qu'est-ce que le saute-mouton ?

• Une page Web demande des ressources à une autre page Web avec un nom de domaine différent/un protocole différent/un port différent. Il s'agit d'un inter-domaine.
• Raison inter-domaines : sur le site Web actuel de demande de nom de domaine, l'envoi d'autres noms de domaine via des requêtes ajax n'est pas autorisé par défaut.

2. Pourquoi les requêtes cross-domaines sont-elles générées ?

• Parce que le navigateur utilise la politique de même origine

3. Qu'est-ce que la politique de même origine ?

• La politique de même origine est une politique de sécurité bien connue proposée par Netscape. Tous les navigateurs prenant en charge JavaScript utilisent désormais cette politique. La politique de même origine est la fonction de sécurité essentielle et la plus élémentaire du navigateur. Si la politique de même origine est manquante, les fonctions normales du navigateur peuvent être affectées. On peut dire que le Web est construit sur la base de la politique de même origine, et que le navigateur n'est qu'une implémentation de cette politique.

4. Pourquoi les navigateurs utilisent-ils la même politique d'origine ?

• vise à assurer la sécurité des informations des utilisateurs et à empêcher les sites Web malveillants de voler des données. Si les pages Web ne répondent pas aux mêmes exigences d'origine, elles ne pourront pas :

• • 1. Cookies partagés, LocalStorage, IndexDB
• • 2. >
3. Les requêtes AJAX ne peuvent pas être envoyées
• Le caractère non absolu de la politique de même origine : des balises avec des attributs src tels que

<script></script>
<img/>
<iframe/>
<link/>
<video/>
<audio/>

peut être envoyé depuis différents domaines. Charger et exécuter des ressources. Politiques de même origine pour les autres plug-ins : les plug-ins tiers chargés par les navigateurs tels que Flash, l'applet Java, Silverlight et Google Gears ont également leurs propres politiques de même origine. Toutefois, ces politiques de même origine n'y appartiennent pas. aux politiques natives de même origine du navigateur. S'il y a des failles, elles peuvent être exploitées par des pirates informatiques, laissant les conséquences des attaques XSS

La soi-disant même origine signifie : le nom de domaine, le protocole réseau et le port. Le nombre est le même. Si l’un des trois est différent, un inter-domaine se produira. Par exemple : vous ouvrez

avec un navigateur, et lorsque le navigateur exécute le script JavaScript, il constate que le script envoie une requête au nom de domaine

. À ce moment, le navigateur signalera une erreur. une erreur inter-domaines.

http://baidu.comIl existe cinq solutions : http://cloud.baidu.com

1. Utiliser jsonp sur le front-end (non recommandé)

Lorsque nous demandons normalement des données JSON, le serveur renvoie est une chaîne de données de type JSON, et lorsque l'on utilise le mode JSONP pour demander des données, le serveur renvoie un code JavaScript exécutable. Parce que le principe inter-domaines de jsonp est de charger dynamiquement le src du script, nous ne pouvons transmettre les paramètres que via l'url, donc le type type de jsonp ne peut être obtenu qu'exemple :

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 数据类型
    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来
})

<🎜. >
• L'ensemble du processus de demande de données en mode JSONP : le client envoie une requête et spécifie un nom de fonction exécutable (ici, jQuery effectue le processus d'encapsulation, génère automatiquement une fonction de rappel pour vous et extrait les données pour la méthode d'attribut de réussite ) appel, au lieu de passer un handle de rappel), le serveur accepte le nom de la fonction backfunc, puis envoie les données sous forme de paramètres réels

(dans le code source jquery, l'implémentation de jsonp est Ajoutez dynamiquement la balise
• pour appeler le script js fourni par le serveur. jquery chargera une fonction globale dans l'objet window Lorsque le code
  est inséré, la fonction sera exécutée. > seront supprimées en même temps. Les requêtes non cross-domaines ont également été optimisées. Si la requête est sous le même nom de domaine, elle fonctionnera comme une requête Ajax normale)
• <script>2. Transfert de demande HTTP en arrière-plan<🎜.><script><script>Utilisez le transfert HttpClinet pour le transfert (cette méthode n'est pas recommandée pour des exemples simples)

try {
    HttpClient client = HttpClients.createDefault();            //client对象
    HttpGet get = new HttpGet("http://localhost:8080/test");    //创建get请求
    CloseableHttpResponse response = httpClient.execute(get);   //执行get请求
    String mes = EntityUtils.toString(response.getEntity());    //将返回体的信息转换为字符串
    System.out.println(mes);
} catch (ClientProtocolException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}

3. Configurez les Cors de même origine en arrière-plan ( recommandé)

• Pour une configuration inter-domaines sur SpringBoot2.0, utilisez la configuration de code suivante pour résoudre parfaitement vos problèmes de requêtes inter-domaines front-end et back-end

Pour la configuration inter-domaines sur SpringBoot2.0, utilisez la configuration de code suivante pour la résoudre parfaitement. Résolvez vos problèmes de requêtes inter-domaines front-end et back-end

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 实现基本的跨域请求
 * @author linhongcun
 *
 */
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允许请求带有验证信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允许访问的客户端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允许服务端访问的客户端请求头*/
        corsConfiguration.addAllowedHeader("*");
        /*允许访问的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }



}

4 Utilisez la passerelle SpringCloud
• <. 🎜>

La passerelle de service (zuul), également connue sous le nom de centre de routage, est utilisée pour accéder uniformément à toutes les interfaces API et aux services de maintenance.

Spring Cloud Zuul réalise une maintenance automatisée des instances de service grâce à l'intégration avec Spring Cloud Eureka, donc lors de l'utilisation de la configuration du routage des services, nous n'avons pas besoin d'utiliser les méthodes de configuration de routage traditionnelles pour spécifier un service spécifique adresse de l'instance, utilisez simplement les paramètres du fichier de configuration du mode Ant

5、使用nginx做转发

• 现在有两个网站想互相访问接口 在http://a.a.com:81/A中想访问 http://b.b.com:81/B 那么进行如下配置即可
• 然后通过访问 www.my.com/A 里面即可访问 www.my.com/B

server {
        listen       80;
        server_name  www.my.com;
        location /A {
            proxy_pass  http://a.a.com:81/A;
            index  index.html index.htm;
        }
        location /B {
            proxy_pass  http://b.b.com:81/B;
            index  index.html index.htm;
        }
    }

• 如果是两个端口想互相访问接口 在http://b.b.com:80/Api中想访问 http://b.b.com:81/Api 那么进行如下配置即可
• 使用nginx转发机制就可以完成跨域问题

server {
        listen       80;
        server_name  b.b.com;
        location /Api {
            proxy_pass  http://b.b.com:81/Api;
            index  index.html index.htm;
        }
    }

希望本篇文章对你有所帮助。

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!