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

インターネット技術の急速な発展により、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 アプリケーションでは、次のような特定のニーズを満たすために特別なリクエスト ヘッダーが必要になる場合があります。

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

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

2. IP 制限

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

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

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

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

4. まとめ

リクエストヘッダーをカスタマイズすることで、特定のニーズに応え、Web アプリケーションのより多くの機能を実現できます。ただし、カスタムリクエストヘッダーを設定する場合は、不要なトラブルを避けるために、不要なヘッダー情報を追加しないように注意する必要があります。

以上がJavaScript でリクエスト ヘッダーをカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。