JavaScript でリクエストヘッダーをカスタマイズする方法

PHPz

リリース： 2023-04-24 15:05:58

オリジナル

2243 人が閲覧しました

インターネット技術の急速な発展により、Web アプリケーションは今日のインターネットの最も一般的な形式の 1 つになりました。 JavaScript は、Web ページのフロントエンドの中核テクノロジーとして、ますます重要になっています。その中で、AJAX テクノロジーの台頭により、Web アプリケーションがバックエンドサーバーとデータをやり取りできるようになり、ページを完全に更新しなくてもページを動的に更新できるようになりました。ただし、特殊なケースでは、アプリケーションのニーズを満たすために、特定のリクエストヘッダーをカスタマイズする必要があり、このとき、JavaScript のカスタムリクエストヘッダーが特に重要になります。

1. リクエストヘッダーとは何ですか?

Web アプリケーションでは、ブラウザがサーバーにリクエストを送信するときに、リクエストにはリクエストに関する追加情報が含まれます。これはリクエストヘッダーと呼ばれ、通常は次の内容が含まれます。

Accept: ブラウザーでサポートされているデータ型。例: Accept: text/html,application/xhtml xml,application/xml;q=0.9,image/webp,/;q=0.8
Referer: のソースアドレスリクエストされたページ。例: リファラー: http://www.example.com/index.html
User-Agent: リクエストを開始したクライアントソフトウェア情報。例: ユーザーエージェント: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML、Gecko など) Chrome/87.0.4280.141 Safari/537.36

2. カスタマイズが必要な理由リクエストヘッダー?

Web アプリケーションでは、次のような特定のニーズを満たすために特別なリクエストヘッダーが必要になる場合があります。

クロスドメインリクエスト

クロスドメイン内リクエストリクエストを行うとき、サーバーは Access-Control-Allow-Headers パラメータを通じて許可されるリクエストヘッダーを制御できます。リクエストヘッダーに特別なパラメータを追加する必要がある場合は、JavaScript を使用してリクエストヘッダーをカスタマイズする必要があります。

IP 制限

一部のサーバーは、リクエストヘッダーの IP アドレスに基づいて制限します。異なる IP アドレスを通じてリクエストを送信したい場合は、リクエストの頭です。

リソースをロードするための設定

一部のリソースでは、リソース抽出などの特定の設定が必要であり、リクエストヘッダーを通じて指定する必要があります。

3. リクエストヘッダーをカスタマイズするにはどうすればよいですか?

JavaScript では、xhr.setRequestHeader() メソッドを通じてリクエストヘッダーをカスタマイズできます。具体的なコードは次のとおりです。

let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.example.com/api', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
    console.log('请求成功');
};
xhr.send(JSON.stringify({name: 'Alice', age: 18}));

ログイン後にコピー

上記のコードでは、xhr.setRequestHeader() メソッドでリクエストヘッダー Content-Type: application/json を追加し、send() メソッドで JSON 形式のデータを送信しました。 ) メソッド {名前:「アリス」、年齢:18}。

場合によっては、複数のパラメータを追加する必要があります。これらのパラメータはトラバーサルを通じて追加できます。サンプルコードは以下のとおりです。

let data = {
    name: 'Alice',
    age: 18
};
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.example.com/api', true);
for (let key in data) {
    if (data.hasOwnProperty(key)) {
        xhr.setRequestHeader(key, data[key]);
    }
}
xhr.onload = function () {
    console.log('请求成功');
};
xhr.send();

ログイン後にコピー