1：クロスドメインとは

クロスドメインとは、ブラウザがサーバーにリクエストを送信するときに、リクエストのアドレスが現在のページのアドレスと異なることを意味します。つまり、プロトコル、ドメイン名、およびポート番号の少なくとも 1 つが異なります。セキュリティ上の理由からブラウザがページをブロックするようにします.リクエストとの相互作用.

2: なぜクロスドメインなのか

クロスドメインの問題の発生は、ブラウザの同一オリジンポリシー (Same-Origin Policy)によって引き起こされます。同一生成元ポリシーは、ブラウザの最もコアで基本的なセキュリティポリシーの 1 つです. これは、ブラウザが、現在の Web ページと同じプロトコル、ドメイン名、およびポート番号を持つリソースのみが対話できるようにすることを意味します.

同一生成元ポリシーの存在はセキュリティ上の理由によるものであり、その目的は、悪意のあるスクリプト攻撃を防ぎ、ユーザー情報のセキュリティを確保することです。ブラウザーがクロスドメインアクセスを許可している場合、攻撃者は自分の Web サイトにいくつかのスクリプトを挿入し、ユーザーが他の Web サイトにアクセスしたときにこれらのスクリプトを自動的に実行するように誘導して、攻撃の目的を達成することができます。したがって、同一生成元ポリシーは、ブラウザがユーザーのセキュリティを保護するための重要な手段の 1 つです。

3: クロスドメインソリューション

1.プロキシサーバー

日常のプロジェクト開発において、クロスドメインの問題に対する最も一般的な解決策は、プロキシサーバーを使用することです。

プロキシサーバーは、ブラウザーからサーバーへのアクセスのみに制限し、サーバーからサーバーへのアクセスには制限を設けない同一オリジンポリシーを使用することで、クロスドメインの問題を解決します.中間サーバーとして、機能を持っています.リクエスト転送の。

具体的には、フロントエンド Web ページがブラウザーでネットワーク要求を開始すると、要求は実際にプロキシサーバーに送信され、プロキシサーバーは要求をターゲットサーバーに転送し、ターゲットサーバーから返された応答を転送します。クライアントに。

本番環境と開発環境では、通常、さまざまな方法でプロキシを実装することに注意してください。

1.1. 本番環境

オンライン環境では、nginx をリバースプロキシとして使用することが一般的です。

Nginx リバースプロキシを介してクロスドメインの問題を解決する手順は次のとおりです。

1. Nginx の構成ファイルを変更し、http ブロックに次の内容を追加します。

http {
    # 允许跨域请求的地址
    add_header 'Access-Control-Allow-Origin' '*';
    
    # 允许跨域请求的方法
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
    
    # 允许跨域请求的请求头
    add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
    
    # 允许跨域请求的请求头中可以携带的信息
    add_header 'Access-Control-Expose-Headers' 'Authorization';
    
    # 允许跨域请求携带 Cookie
    add_header 'Access-Control-Allow-Credentials' 'true';

    ...
}

2. 以下をサーバーブロックに追加します。

server {
    listen 80;
    server_name example.com;

    # 将 /api 转发到 http://api.example.com
    location /api {
        proxy_pass http://api.example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

この構成は、クライアントが要求した/api がhttp://api.example.comに転送され、クライアントが要求したヘッダー情報にある Host と X-Real-IP が、バックエンド。このように、クロスドメインの問題は、Nginx リバースプロキシを介して解決できます。

Nginx リバースプロキシを介してクロスドメインの問題を解決する利点は、クロスドメインのリクエストを一元管理できることですが、欠点は、追加のサーバーとメンテナンスコストが必要になることです。

1.2. 開発環境

開発環境では、ローカル開発サーバーの構成ファイルを変更するか、フロントエンドコードにクロスドメイン関連のコードを追加することで、クロスドメインの問題を解決できます. Vue のプロジェクトを例に挙げてみましょう.

プロジェクトが vue-cli スキャフォールディングツールを介して構築されている場合、webpack を介したリクエストのプロキシオブジェクトとしてローカルサーバーを設定できます。vue.config.jsファイルに、次のコードを追加します。

module.exports = {
    devServer: {
        proxy: {
            '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                changeOrigin: true, //是否跨域
                pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                    '^/api': "" 
                }
            }
        }
    }
}

2.JSONP

JSONP (JSON with Padding) は、クロスドメインソリューションです. script タグの src 属性が同一生成元ポリシーによって制限されないという機能を使用します. サーバーから JSON データを返すときに、データをコールバックでラップします.クロスドメインリクエストを実現するために、関数をフロントエンドに返します

JSONP を使用したサンプルコードを次に示します。

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url + '&callback=' + callback;
  document.body.appendChild(script);
}

function handleData(data) {
  console.log(data);
}

jsonp('http://example.com/api/data?param=value', 'handleData');

上記のコードでは、URL とコールバック関数の名前をパラメーターとして受け取る jsonp 関数を定義しています。関数内でスクリプトタグを作成し、URL とコールバック関数名を連結します。最後に、スクリプトタグをドキュメントに追加して、クロスオリジンリクエストをトリガーします。

JSONP はクロスドメインの問題を解決できますが、主に次のような欠点もあります。

GET リクエストのみサポート: JSONP は script タグを動的に作成することによって実装されるため、GET リクエストのみがサポートされ、POST リクエストおよびその他のタイプのリクエストはサポートされません。
セキュリティの問題: JSONP のセキュリティの問題は、攻撃者によって比較的簡単に悪用されます.攻撃者は、JSONP のコールバック関数を変更して悪意のあるコードを挿入し、Web サイトにセキュリティ上の脅威をもたらす可能性があります.
エラーを処理できない: JSONP はスクリプトタグを介してデータを読み込むため、要求の失敗をキャッチできず、エラーメッセージを処理できません。

一般に、JSONP は比較的古いクロスドメインソリューションです. 一部のクロスドメインの問題を解決できますが、上記の欠点があるため、他のより安全で信頼性の高いクロスドメインソリューションが通常、最新のアプリケーションで使用されます. CORS などのソリューション、リバースプロキシなど。

3.CORS

CORS (クロスオリジンリソース共有、クロスドメインリソース共有) は、一連の送信された HTTP ヘッダーで構成されます。これらの HTTP ヘッダーは、ブラウザーがフロントエンド JavaScript コードがクロスドメイン要求への応答を取得できないようにするかどうかを決定します。

CORS は実装が非常に便利です。サーバーが許可されたアクセスソースを宣言できるように、いくつかの HTTP ヘッダーを追加するだけで済みます。バックエンドがCORSを実装していれば、クロスドメインを実現

koaフレームワークを例として、ミドルウェアを追加し、Access-Control-Allow-Origin 応答ヘッダーを直接設定します。

app.use(async (ctx, next)=> {
  ctx.set('Access-Control-Allow-Origin', '*');
  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  await next()  
})

CORS (Cross-Origin Resource Sharing) は、現在一般的に使用されているクロスドメインソリューションです. JSONP などの従来のクロスドメインソリューションと比較すると、次の利点と欠点があります。

アドバンテージ：

高度なセキュリティ: CORS はブラウザー側とサーバー側の両方でサポートされているため、さまざまなソースからのクライアントが、セキュリティを確保するという前提の下でサーバー側のリソースを要求でき、JSONP の潜在的なセキュリティの問題を回避できます。
すべてのタイプの HTTP リクエストをサポート: CORS は、単純なリクエスト(GET、POST、HEAD)のクロスドメインリクエストをサポートするだけでなく、複雑なリクエスト(PUT、DELETE、OPTIONS、PATCH) やその他のタイプのクロスドメインリクエストもサポートします。
高い柔軟性: CORS は、柔軟性とスケーラビリティが高い、さまざまな種類の要求ヘッダーと応答ヘッダーの構成をサポートしています。
標準に準拠: CORS は W3C 標準であり、最新の Web 開発テクノロジと一致しており、より多くのクロスドメインシナリオをサポートできます。

欠点:

複雑な構成: CORS の構成は比較的複雑で、サーバー側で特定の設定と構成が必要です. CORS に慣れていない一部の開発者にとっては、より多くの時間と労力がかかる場合があります.
互換性の問題: CORS は最新の Web 開発テクノロジの一部です. 古いバージョンのブラウザーではサポートされていないか、完全にはサポートされていない可能性があり、互換処理が必要です.
プリフライトリクエストがあります: 一部の複雑なリクエスト (カスタムヘッダー情報を含むリクエストなど) の場合、ブラウザはプリフライトリクエスト (Preflight) を送信します。これにより、リクエストのオーバーヘッドとネットワーク転送の負荷が増加します。

要約すると、CORS は従来のクロスドメインソリューションよりも安全で柔軟な標準ソリューションですが、構成はより複雑であり、互換性やプリフライトリクエストなどの問題に対処する必要があります。

ドメイン間で共通のソリューション

1：クロスドメインとは

2: なぜクロスドメインなのか

3: クロスドメインソリューション

1.プロキシサーバー

1.1. 本番環境

1.2. 開発環境

2.JSONP

3.CORS

おすすめ

ドメイン間で共通のソリューション

1：クロスドメインとは

2: なぜクロスドメインなのか

3: クロスドメイン ソリューション

1.プロキシサーバー

1.1. 本番環境

1.2. 開発環境

2.JSONP

3.CORS

おすすめ

3: クロスドメインソリューション