
JavaScript を使用したクロスドメイン POST リクエストの送信
問題:
を使用してクロスドメイン POST リクエストを実行する方法ページを更新したり、応答を要求したりしない JavaScript parse?
解決策:
クロスオリジン リソース共有 (CORS) について
クロスドメイン通信を促進するには、 CORS はサーバーに実装される標準です。サーバーに応答ヘッダーを設定することで、特定のドメインに独自のドメイン上のリソースへのアクセス許可を付与できます。
サーバー側の構成 (PHP を使用):
- ターゲットの PHP ファイル (例: postHere.php) に次の内容を含めます。コード:
1 2 3 4 5 6 7 8 9 10 | <?php
switch ( $_SERVER [ 'HTTP_ORIGIN' ]) {
case 'http://from.com' : case 'https://from.com' :
header( 'Access-Control-Allow-Origin: ' . $_SERVER [ 'HTTP_ORIGIN' ]);
header( 'Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS' );
header( 'Access-Control-Max-Age: 1000' );
header( 'Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With' );
break ;
}
?>
|
ログイン後にコピー
これにより、from.com のスクリプトがクロスドメイン POST、GET、および OPTIONS リクエストを行うことができるようになります。
クライアントサイド AJAX リクエスト ( jQuery の使用):
- AJAX をセットアップするrequest:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $.ajax({
type: 'POST' ,
url: 'https://to.com/postHere.php' ,
crossDomain: true,
data: '{"some":"json"}' ,
dataType: 'json' ,
success: function (responseData, textStatus, jqXHR) {
var value = responseData.someKey;
},
error: function (responseData, textStatus, errorThrown) {
alert( 'POST failed.' );
}
});
|
ログイン後にコピー
Process:
- ブラウザは、POST が許可されているかどうかを確認する OPTIONS リクエストを送信します。
- サーバー特定のユーザーにアクセス許可を付与する Access-Control ヘッダーで応答します。
- ブラウザは実際の POST リクエストを送信します。
- サーバーはリクエストを処理し、レスポンスを返します。
考慮事項:
- クロスオリジンを許可する場合は、適切なセキュリティ予防措置が講じられていることを確認してください
- モバイル ブラウザは通常、クロスドメイン POST をサポートしません。
- 二重リクエストの潜在的なオーバーヘッドとセキュリティへの影響を考慮してください。
- 常に適切な CORS ヘッダーを返します。 OPTIONS リクエストだけでなく、レスポンスも同様です。
以上がページの更新や応答の解析を行わずに、JavaScript でクロスドメイン POST リクエストを行うにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。