Fünf Lösungen für domänenübergreifende Websites

Da der Browser die Same-Origin-Richtlinie verwendet, wird eine domänenübergreifende Anfrage generiert. Eine Webseite fordert Ressourcen von einer anderen Webseite mit einem anderen Domänennamen/einem anderen Protokoll/einem anderen Port an. Dies ist domänenübergreifend. Dieser Artikel bietet 5 Möglichkeiten, das Problem der domänenübergreifenden Website zu lösen. Interessierte Freunde können einen Blick darauf werfen.

1. Was ist Leapfrog?

• Eine Webseite fordert Ressourcen von einer anderen Webseite mit einem anderen Domänennamen/einem anderen Protokoll/einem anderen Port an. Dies ist domänenübergreifend.
• Domänenübergreifender Grund: Auf der aktuellen Website zur Anforderung von Domänennamen ist das Senden anderer Domänennamen über Ajax-Anfragen standardmäßig nicht zulässig.

2. Warum werden domänenübergreifende Anfragen generiert?

• Weil der Browser die Same-Origin-Richtlinie verwendet

3. Was ist die Same-Origin-Richtlinie?

• Die Same-Origin-Richtlinie ist eine bekannte Sicherheitsrichtlinie, die von Netscape vorgeschlagen wird. Alle Browser, die JavaScript unterstützen, verwenden diese Richtlinie. Die Same-Origin-Richtlinie ist die wichtigste und grundlegendste Sicherheitsfunktion des Browsers. Wenn die Same-Origin-Richtlinie fehlt, können die normalen Funktionen des Browsers beeinträchtigt sein. Man kann sagen, dass das Web auf der Grundlage der Same-Origin-Richtlinie aufgebaut ist und der Browser nur eine Implementierung der Same-Origin-Richtlinie ist.

4. Warum verwenden Browser dieselbe Ursprungsrichtlinie?

• dient dazu, die Sicherheit der Benutzerinformationen zu gewährleisten und zu verhindern, dass böswillige Websites Daten stehlen. Wenn die Webseiten nicht dieselben Herkunftsanforderungen erfüllen, können sie Folgendes nicht tun:

• • 1. Gemeinsame Cookies, LocalStorage, IndexDB
• • 2. DOM
• • 3. AJAX-Anfragen können nicht gesendet werden

Nicht-absolute Ursprungsrichtlinie: Tags mit src-Attributen wie

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

kann von verschiedenen Domänen gesendet werden. Ressourcen laden und ausführen. Same-Origin-Richtlinien für andere Plug-Ins: Plug-Ins von Drittanbietern, die von Browsern wie Flash, Java-Applet, Silverlight und Google Gears geladen werden, haben ebenfalls ihre eigenen Same-Origin-Richtlinien. Diese Same-Origin-Richtlinien gelten jedoch nicht Wenn es Lücken in den nativen Same-Origin-Richtlinien des Browsers gibt, können diese von Hackern ausgenutzt werden und die Folgen von XSS-Angriffen hinterlassen.

Der sogenannte Same-Origin bedeutet: der Domänenname, das Netzwerkprotokoll und der Port Wenn eine der drei Nummern gleich ist, kommt es zu domänenübergreifenden Problemen. Beispiel: Sie öffnen http://baidu.com mit einem Browser und wenn der Browser das JavaScript-Skript ausführt, stellt er fest, dass das Skript eine Anfrage an den http://cloud.baidu.com-Domänennamen sendet. Zu diesem Zeitpunkt meldet der Browser einen Fehler ein domänenübergreifender Fehler.

Es gibt fünf Lösungen:

1. Verwenden Sie JSONP im Frontend (nicht empfohlen)

• Wenn wir normalerweise JSON-Daten anfordern, gibt der Server Folgendes zurück eine Zeichenfolge mit Daten vom Typ JSON, und wenn wir den JSONP-Modus zum Anfordern von Daten verwenden, gibt der Server einen ausführbaren JavaScript-Code zurück. Da das domänenübergreifende Prinzip von JSONP darin besteht, den Quellcode des Skripts dynamisch zu laden, können wir die Parameter nur über die URL übergeben, sodass der Typtyp von JSONP nur abgerufen werden kann. Beispiel:

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

• Der gesamte Prozess der Datenanforderung im JSONP-Modus: Der Client sendet eine Anfrage und gibt einen ausführbaren Funktionsnamen an (hier übernimmt jQuery den Kapselungsprozess, generiert automatisch eine Rückruffunktion für Sie und entnimmt die Daten für die Erfolgsattributmethode ) aufrufen, anstatt ein Callback-Handle zu übergeben), akzeptiert der Server den Namen der Backfunc-Funktion und sendet dann die Daten in Form von tatsächlichen Parametern
  
• (im JQuery-Quellcode die Implementierung von JSONP Fügen Sie das vom Server bereitgestellte js-Skript dynamisch hinzu. Wenn der <script>-Code eingefügt wird, wird die Funktion ausgeführt > werden gleichzeitig entfernt. Wenn die Anfrage unter demselben Domainnamen erfolgt, funktioniert sie wie eine normale Ajax-Anfrage)<script><script>
2. Weiterleitung von Http-Anfragen im Hintergrund<🎜. >

Verwenden Sie die HttpClinet-Weiterleitung für die Weiterleitung (diese Methode wird für einfache Beispiele nicht empfohlen)

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();
}

Nach dem Login kopieren
• 3. Konfigurieren Sie Cors mit demselben Ursprung im Hintergrund ( empfohlen)

Verwenden Sie für die domänenübergreifende Konfiguration auf SpringBoot2.0 die folgende Codekonfiguration, um Ihre domänenübergreifenden Front-End- und Back-End-Anforderungsprobleme perfekt zu lösen

• Für die domänenübergreifende Konfiguration auf SpringBoot2.0 verwenden Sie die folgende Codekonfiguration, um Ihre domänenübergreifenden Front-End- und Back-End-Anforderungsprobleme perfekt zu lösen

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);
    }



}

Nach dem Login kopieren

• Spring Cloud Zuul realisiert die automatisierte Wartung von Serviceinstanzen durch die Integration mit Spring Cloud Eureka, sodass wir bei Verwendung der Service-Routing-Konfiguration keine herkömmlichen Routing-Konfigurationsmethoden verwenden müssen, um einen bestimmten Service anzugeben Instanzadresse verwenden Sie einfach die Parameter der Ant-Modus-Konfigurationsdatei

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;
        }
    }

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

Das obige ist der detaillierte Inhalt vonFünf Lösungen für domänenübergreifende Websites. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!