JavaScriptのクロスドメインエラー-フロントエンドQ&A-php.cn

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

王林

リリース： 2023-05-12 11:02:37

オリジナル

1085 人が閲覧しました

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

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

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

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

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

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

ログイン後にコピー

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

サーバー側で 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');
});

ログイン後にコピー

プロキシサーバー

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

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

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

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

相対パスを使用する

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

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

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

ログイン後にコピー

ブラウザが提供する 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);
});

ログイン後にコピー

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

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

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

概要

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

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