[解決済み] AJAXによるクロスドメインエンドポイントの読み込み

2022-06-22 14:35:16

質問

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 リクエストは、同一生成元ポリシーの制限を受けません。

を克服する方法がいくつかあります。 クロスドメイン の障壁を克服する方法があります。

CORS プロキシ代替案
同一生成元ポリシーを回避する方法
クロスドメインの壁を破る

を支援するプラグインがあります。 クロスドメイン リクエストをサポートするプラグインがあります。

YQLとjQueryによるクロスドメインAJAXリクエスト
jQuery.ajaxを使ったクロスドメインリクエスト

ヘッドアップ!

この問題を解決する最良の方法は、バックエンドで独自のプロキシを作成することです。 同一生成元ポリシー という制約がないからです。しかし、バックエンドでそれができない場合、次のヒントに注意してください。

**警告！***

サードパーティのプロキシを使用することは、あなたのデータを追跡することができるため、公開情報を使用することができ、安全な方法とは言えませんが 決して を使用することはできません。

以下に示すコード例では 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-プロキシ gr2m
CORS-プロキシ rmadhuram

どのように機能するのでしょうか。 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