JavaScriptのクロスドメインエラー

フロントエンド テクノロジの継続的な開発により、JavaScript は最新の Web アプリケーションを構築するためのコア テクノロジになりました。ただし、実際には、JavaScript のクロスドメイン エラーが頻繁に発生します。この記事では、JavaScriptのクロスドメインエラーが発生する原因と解決策、回避方法を紹介します。

1. JavaScript のクロスドメイン エラーの理由

JavaScript では、クロスドメイン エラーとは、あるドメイン名の Web ページが別のドメイン名の Web ページへの HTTP リクエストを開始することを指します。デバイスの傍受。これは、ブラウザの同一生成元ポリシーにより、他のドメイン名のリソースに直接アクセスできないためです。つまり、データの共有と対話は、同じドメイン名、ポート番号、プロトコルの下でのみ実現できます。

たとえば、「www.example.com」という名前の Web サイトにいて、「www.another-example.com」という名前の Web サイトに Ajax リクエストを送信したい場合、国境を越えたリクエストは次のようになります。ドメインエラーが発生しました。

2. JavaScript クロスドメイン エラーの解決策

1. Use jsonp

jsonp は、スクリプト タグを使用してクロスドメイン リクエストを行う方法です。 jsonp では、サーバーは応答データをコールバック関数でラップしてクライアントに返し、クライアントはデータを取得できます。

たとえば、次のコードは、jsonp を使用してクロスドメイン リクエスト データを実装する方法を示しています。

function getData() {
    var scriptElement = document.createElement('script');
    scriptElement.src = 'http://www.example.com/data?callback=handleData';
    document.querySelector('head').appendChild(scriptElement);
}

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

2. クロスドメイン リクエストをサポートするようにサーバー設定を変更します

サーバー側で CORS (クロスドメイン リソース共有) ポリシーを構成すると、クライアントが他のドメイン名からデータを取得できるようになります。たとえば、Node.js では、cors モジュールを使用してクロスドメイン リクエストを実装できます。

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/data', (req, res) => {
    res.send('data from another domain');
});

app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
});

3. プロキシ サーバー

プロキシ サーバーを使用して、クロスドメイン要求をターゲット ドメイン名のサーバーに転送し、結果をクライアントに返します。クロスドメインの問題。

たとえば、nginx または Node.js をプロキシ サーバーとして使用できます。

3. JavaScript のクロスドメイン エラーを防ぐ方法

上記の方法を使用してクロスドメインの問題を解決することもできますが、実際、最良の方法はクロスドメインを回避することです。コードを書くときにエラーが発生する可能性があります。

1. 相対パスを使用する

他のドメイン名にリクエストが送信されないように、絶対パスではなく相対パスを使用してリソースを取得します。

たとえば、次のコードでは、画像リソース image.jpg が相対パスを通じて取得されます。

<img src="image.jpg" alt="example">

2. ブラウザが提供する API を使用する

リソースを取得するために HTTP リクエストを行うのではなく、ブラウザーが提供する API を使用してリソースを取得します。

たとえば、Ajax リクエストを通じてファイル コンテンツを取得するのではなく、File API を使用してファイル コンテンツを取得します。

document.getElementById('upload').addEventListener('change', () => {
    const file = document.getElementById('upload').files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
        console.log(e.target.result);
    };

    reader.readAsDataURL(file);
});

3. 同じドメイン名の下でサブドメイン名を使用する

クロスドメイン要求を避けるために、同じドメイン名の下で異なるサブドメイン名を使用して、それぞれ異なるサービスを提供します。 。

たとえば、xxx.example.com と yyy.example.com を使用して、それぞれ異なるサービスを提供します。

概要

JavaScript クロスドメイン エラーは、フロントエンド開発でよく発生する問題であり、この問題を解決する方法は数多くあります。 jsonp を使用し、サーバー設定を変更し、プロキシ サーバーを使用してクロスドメインの問題を解決できます。ただし、最善の方法は、クロスドメイン エラーの発生を防ぐために、コードを記述するときにクロスドメイン リクエストを回避することです。

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