[解決済み] AJAXによるクロスドメインエンドポイントの読み込み
質問
AJAXを使用してクロスドメインのHTMLページをロードしようとしていますが、dataTypeが"jsonp"でなければ、レスポンスを取得することができません。しかし、jsonp を使用して、ブラウザはスクリプト MIME タイプを期待していますが、"text/html" を受信しています。
私のリクエストのコードは次のとおりです。
$.ajax({
type: "GET",
url: "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute",
dataType: "jsonp",
}).success( function( data ) {
$( 'div.ajax-field' ).html( data );
});
リクエストにjsonpを使用しない方法はありますか?すでにcrossDomainパラメータを使用してみましたが、うまくいきませんでした。
そうでない場合、jsonp で html コンテンツを受信する方法はありますか?現在、コンソールは、jsonpの応答で "予期しない <" と言っています。
どのように解決するのですか?
jQuery Ajaxの注意事項
- ブラウザのセキュリティ上の制約から、ほとんどの Ajax リクエストは 同一生成元ポリシー が適用されます。 リクエストは異なるドメイン、サブドメイン、ポート、プロトコルから 正常にデータを取得することができません。
- スクリプトと JSONP リクエストは、同一生成元ポリシーの制限を受けません。
を克服する方法がいくつかあります。 クロスドメイン の障壁を克服する方法があります。
を支援するプラグインがあります。
クロスドメイン
リクエストをサポートするプラグインがあります。
ヘッドアップ!
この問題を解決する最良の方法は、バックエンドで独自のプロキシを作成することです。 同一生成元ポリシー という制約がないからです。しかし、バックエンドでそれができない場合、次のヒントに注意してください。
**警告!***
サードパーティのプロキシを使用することは、あなたのデータを追跡することができるため、公開情報を使用することができ、安全な方法とは言えませんが 決して を使用することはできません。
以下に示すコード例では jQuery.get() と jQuery.getJSON()で取得できます。 の省略記法で、どちらも jQuery.ajax()
どこでもCORS
2021年の更新
2021年1月31日までに、公開デモサーバ(cors-anywhere.herokuapp.com)が非常に制限される予定です。
CORS Anywhere のデモ サーバー (cors-anywhere.herokuapp.com) は、このプロジェクトのデモとして使用することを意図しています。しかし、悪用があまりにも多くなったため、デモがホストされているプラットフォーム (Heroku) は、悪用に対抗する努力にもかかわらず、サーバーを停止するよう私に要請してきました。不正使用とその人気により、ダウンタイムがますます頻繁になっています。
この対策として、私は以下の変更を行う予定です。
- レート制限を 1 時間あたり 200 から 1 時間あたり 50 に引き下げます。
- 2021年1月31日までに、cors-anywhere.herokuapp.comはオープンプロキシとしてサービスを停止します。
- 2021 年 2 月 1 日から。2021年、cors-anywhere.herokuapp.comは訪問者がチャレンジを完了した後にのみリクエストを提供します。ユーザー(開発者)はcors-anywhere.herokuapp.comのページを訪問してブラウザ用のデモを一時的にアンロックする必要があります。これにより、開発者は機能を試すことができ、セルフホスティングを決定したり、代替案を探したりするのに役立ちます。
CORS Anywhere は
node.js プロキシ
であり、プロキシされたリクエストに CORS ヘッダを追加します。
APIを利用するには、API URLをプレフィックスとして指定するだけです。(対応する
https
: 参照
githubリポジトリ
)
必要なときに自動的にクロスドメインリクエストを有効にしたい場合は、次のスニペットを使用します。
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.get(
'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
どのような起源であれ
どのような起源であれ は クロスドメインjsonp にアクセスすることができます。これは、オープンソースの代替品である anyorigin.com .
からデータを取得するために google.com, からデータを取得するには、このスニペットを使用します。
// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options:
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
scriptCharset: "utf-8", //or "ISO-8859-1"
contentType: "application/json; charset=utf-8"
});
$.getJSON('http://whateverorigin.org/get?url=' +
encodeURIComponent('http://google.com') + '&callback=?',
function (data) {
console.log("> ", data);
//If the expected response is text/plain
$("#viewer").html(data.contents);
//If the expected response is JSON
//var response = $.parseJSON(data.contents);
});
CORS プロキシ
CORS プロキシはシンプルな node.js プロキシです。 を使用して、任意の Web サイトの CORS リクエストを有効にします。 これは、あなたのサイトの javascript コードが、通常は同一生成元ポリシーのためにブロックされる他のドメイン上のリソースにアクセスすることを可能にします。
どのように機能するのでしょうか。 CORS Proxy は、HTML 5 とともに追加された機能である Cross-Origin Resource Sharing を利用しています。サーバーは、他の Web サイトがホストしているリソースを要求することをブラウザに許可するよう指定できます。CORS プロキシは、「誰でもこれを要求できます」というヘッダーをレスポンスに追加する、単なる HTTP プロキシです。
これは、目標を達成するためのもう 1 つの方法です (
www.corsproxy.com
). あなたがしなければならないのは
http://
と
www
をプロキシされる URL の前に付加してください。
www.corsproxy.com/
$.get(
'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
CORS プロキシブラウザ
最近見つけたもので、セキュリティ重視の Cross Origin Remote Sharing ユーティリティをいろいろと含んでいます。しかし、これはFlashをバックエンドとするブラックボックスです。
ここで実際に動作しているところを見ることができます。
CORS プロキシブラウザ
ソースコードはGitHubで入手してください。
koto/cors-proxy-browser
関連
-
JavaScriptの関数この指摘の問題を説明
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] jQuery AJAX クロスドメイン
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
Vue+ElementUIによる大規模なフォームの処理例
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
vueの補間表現とv-textディレクティブの違いについて
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法