Web サイトのクロスドメイン向け 5 つのソリューション

ブラウザは同一生成元ポリシーを使用するため、クロスドメインリクエストが発生します。 Web ページが、異なるドメイン名/異なるプロトコル/異なるポートを使用して別の Web ページにリソースを要求します。これはクロスドメインです。この記事では、Web サイトのクロスドメインの問題を解決する 5 つの方法を紹介します。興味のある友人は参照してください。

1.リープフロッグとは何ですか?

• Web ページが、異なるドメイン名/異なるプロトコル/異なるポートを持つ別の Web ページからリソースを要求します。これはクロスドメインです。
• クロスドメインの理由: 現在のドメイン名リクエスト Web サイトでは、Ajax リクエストを介して他のドメイン名を送信することはデフォルトで許可されていません。

2. クロスドメインリクエストが発生するのはなぜですか?

• ブラウザは同一オリジン ポリシーを使用するため、

3. 同一オリジン ポリシーとは何ですか?

• 同一オリジン ポリシーは、Netscape によって提案されたよく知られたセキュリティ ポリシーであり、現在 JavaScript をサポートするすべてのブラウザでこのポリシーが使用されています。同一オリジン ポリシーはブラウザの中核で最も基本的なセキュリティ機能であり、同一オリジン ポリシーが存在しない場合、ブラウザの通常の機能に影響が出る可能性があります。 Web は同一オリジン ポリシーに基づいて構築されており、ブラウザは同一オリジン ポリシーの実装にすぎないと言えます。

4. ブラウザが同一生成元ポリシーを使用するのはなぜですか?

• は、ユーザー情報のセキュリティを確保し、悪意のある Web サイトがデータを盗むのを防ぐためのものです。Web ページが同一オリジン要件を満たしていない場合、次のことができなくなります。

• 1. Cookie、LocalStorage、IndexDB の共有
• ##2. DOM
  • ## の取得
#3. AJAX リクエストは送信できません
• 同一生成元ポリシーの非絶対的な性質:

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

および src 属性を持つその他のタグは、異なるドメインから送信できます。 リソースをロードして実行します。他のプラグインの同一オリジン ポリシー: Flash、Java アプレット、Silverlight、Google Gears などのブラウザによって読み込まれるサードパーティ プラグインにも独自の同一オリジン ポリシーがありますが、これらの同一オリジン ポリシーは属しません。ブラウザのネイティブの同一オリジン ポリシーに適用されます。抜け穴がある場合、ハッカーによって悪用され、XSS 攻撃の結果が残る可能性があります。

いわゆる同一オリジンとは、ドメイン名、ネットワーク プロトコル、およびポート番号は同じですが、1つでも異なるとクロスドメインが発生します。たとえば、ブラウザを使用して

http://baidu.com

を開き、ブラウザが JavaScript スクリプトを実行すると、スクリプトが

http:// にリクエストを送信していることがわかります。 cloud.baidu.com ドメイン名。ブラウザは、クロスドメイン エラーであるエラーを報告します。 解決策は 5 つあります:

1. フロントエンドで jsonp を使用します (推奨されません)

通常、JSON データをリクエストすると、サーバーは次のように返します。 JSON タイプのデータの文字列。JSONP モードを使用してデータをリクエストすると、サーバーは実行可能な JavaScript コードを返します。 jsonp のクロスドメインの原則は、スクリプトの src を動的にロードすることであるため、パラメーターは URL 経由でのみ渡すことができるため、jsonp の型 type は取得のみ可能です。例:

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

• JSONP モードを使用してデータをリクエストするプロセス全体: クライアントはリクエストを送信し、実行可能な関数名を指定します (ここでは、jQuery がカプセル化プロセスを実行し、自動的にコールバック関数を生成し、success 属性のデータを取り出します)メソッド) コールバック ハンドルを渡す代わりに呼び出し)、サーバーは backfunc 関数名を受け入れ、実際のパラメーターの形式でデータを送信します

• (jquery ソース コードでは、 jsonp は、サーバーが提供する js スクリプトを呼び出すために
  3f1c4e4b6b16bbbd69b2ee476dc4f83a
タグを動的に追加します。jquery は window オブジェクトにグローバル関数をロードし、
• 0d018bcf328ea21afb62af13ef6da964 コードが挿入されます。実行後、3f1c4e4b6b16bbbd69b2ee476dc4f83a は削除されます。同時に、jquery は非クロスドメイン リクエストも最適化しました。リクエストが同じドメインの下にある場合は、 2. バックグラウンド Http リクエスト転送

転送には HttpClinet 転送を使用します (このメソッドは、単純な例として推奨)

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. バックグラウンドで同一オリジン Cors を構成する (推奨)

クロスドメインのクロスドメインには次のコード構成を使用します。フロントエンドとバックエンドのクロスドメイン リクエストの問題を完全に解決する SpringBoot2.0

• SpringBoot2.0 でクロスドメインに次のコード構成を使用して、フロントエンドとバックエンドを完全に解決します-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. SpringCloud ゲートウェイを使用する

ルーティング センターとも呼ばれるサービス ゲートウェイ (zuul) は、すべての API に均一にアクセスするために使用されます。インターフェイスを構築し、サービスを維持します。

• Spring Cloud Zuul は Spring Cloud Eureka との統合によりサービス インスタンスの自動メンテナンスを実現するため、サービス ルーティング構成を使用する場合、従来のルーティング構成方法を使用する必要はありません。特定のサービスを指定するにはインスタンス アドレス。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;
        }
    }

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

以上がWeb サイトのクロスドメイン向け 5 つのソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。