web-dev-qa-db-ja.com

jQuery 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の応答で "予想外の<"と言っています。

javascriptjqueryajaxcorscross-domain
118
xonorageous

Ajax-cross-OriginをjQueryプラグインとして使うことができます。このプラグインではjQuery.ajax()クロスドメインを使います。これを達成するためにGoogleのサービスを使用します。

AJAX Cross Originプラグインは、jSONPが実装されていないプロキシjSONゲッターとしてGoogle Apps Scriptを使用します。 crossOriginオプションをtrueに設定すると、プラグインは元のURLをGoogle Apps Scriptアドレスに置き換えて、エンコードされたURLパラメータとして送信します。 Google Apps ScriptはGoogle Serversのリソースを使用してリモートデータを取得し、それをJSONPとしてクライアントに返します。

使い方はとても簡単です。

    $.ajax({
        crossOrigin: true,
        url: url,
        success: function(data) {
            console.log(data);
        }
    });

あなたはここでもっと読むことができます： http://www.ajax-cross-Origin.com/

20
Ninioe

外部サイトがJSONPまたはCORSをサポートしていない場合、あなたの唯一の選択肢はプロキシを使うことです。

そのコンテンツを要求するスクリプトをサーバー上に構築してから、jQuery ajaxを使用してサーバー上のスクリプトをヒットさせます。

11
Kevin B

これをPHPページのヘッダーに入れるだけで、APIがなくてもうまくいきません。

header('Access-Control-Allow-Origin: *'); //allow everybody

または

header('Access-Control-Allow-Origin: http://codesheet.org'); //allow just one domain

または

$http_Origin = $_SERVER['HTTP_Origin'];  //allow multiple domains

$allowed_domains = array(
  'http://codesheet.org',
  'http://stackoverflow.com'
);

if (in_array($http_Origin, $allowed_domains))
{  
    header("Access-Control-Allow-Origin: $http_Origin");
}
3
studio-klik

Jheraxが提案しているようにローカルプロキシを使って外部サイトからデータフォームを取得するには、それぞれの外部URLからコンテンツを取得するphpページを作成し、そのphpページにgetリクエストを送信します。

var req = new XMLHttpRequest();
req.open('GET', 'http://localhost/get_url_content.php',false);
if(req.status == 200) {
   alert(req.responseText);
}

pHPのプロキシとして使用することができます https://github.com/cowboy/php-simple-proxy

0
Nitigya Sharma

誰かが私が今直面しているのと同じ問題に直面した場合に備えてこれを投稿しています。 ZebraNetプリントサーバーを搭載したZebraサーマルプリンタを持っています。これは、複数の設定を編集したり、プリンタの現在のステータスを確認したりするためのHTMLベースのユーザーインタフェースを提供します。 ZebraNetサーバーによって提供されているこれらのHTMLページの1つで、たとえばalert（）ブラウザのユーザーへのメッセージ。これは、そのHTMLページを最初にJavascriptで取得する必要があることを意味します。プリンタはユーザのPCのLAN内にありますが、 Same Origin Policy ということは、私のやり方ではまだしっかりと残っています。私はJSONPを試しましたが、サーバーがhtmlを返し、その機能を変更する方法を見つけられませんでした（できれば、既にAccess-control-allow-Origin：*というマジックヘッダーを設定していたでしょう）。そこで私はC＃で小さなコンソールアプリを書くことにしました。正しく動作させるには管理者として実行する必要があります。それ以外の場合は次のようになります。D例外。ここにいくつかのコードがあります：

// Create a listener.
        HttpListener listener = new HttpListener();
        // Add the prefixes.
        //foreach (string s in prefixes)
        //{
        //    listener.Prefixes.Add(s);
        //}
        listener.Prefixes.Add("http://*:1234/"); // accept connections from everywhere,
        //because the printer is accessible only within the LAN (no portforwarding)
        listener.Start();
        Console.WriteLine("Listening...");
        // Note: The GetContext method blocks while waiting for a request. 
        HttpListenerContext context;
        string urlForRequest = "";

        HttpWebRequest requestForPage = null;
        HttpWebResponse responseForPage = null;
        string responseForPageAsString = "";

        while (true)
        {
            context = listener.GetContext();
            HttpListenerRequest request = context.Request;
            urlForRequest = request.RawUrl.Substring(1, request.RawUrl.Length - 1); // remove the slash, which separates the portNumber from the arg sent
            Console.WriteLine(urlForRequest);

            //Request for the html page:
            requestForPage = (HttpWebRequest)WebRequest.Create(urlForRequest);
            responseForPage = (HttpWebResponse)requestForPage.GetResponse();
            responseForPageAsString = new StreamReader(responseForPage.GetResponseStream()).ReadToEnd();

            // Obtain a response object.
            HttpListenerResponse response = context.Response;
            // Send back the response.
            byte[] buffer = System.Text.Encoding.UTF8.GetBytes(responseForPageAsString);
            // Get a response stream and write the response to it.
            response.ContentLength64 = buffer.Length;
            response.AddHeader("Access-Control-Allow-Origin", "*"); // the magic header in action ;-D
            System.IO.Stream output = response.OutputStream;
            output.Write(buffer, 0, buffer.Length);
            // You must close the output stream.
            output.Close();
            //listener.Stop();

ユーザーがする必要があるのはAdminとしてそのコンソールアプリを実行することだけです。私はそれがあまりにも方法であることを知っています...いらだらしくて複雑です、しかし、それはあなたが少しの方法でもサーバーを修正することができない場合のドメインポリシー問題に対する一種の回避策です。

編集：JSから私は簡単なAjaxの呼び出しを行います：

$.ajax({
                type: 'POST',
                url: 'http://LAN_IP:1234/http://google.com',
                success: function (data) {
                    console.log("Success: " + data);
                },
                error: function (e) {
                    alert("Error: " + e);
                    console.log("Error: " + e);
                }
            });

要求されたページのhtmlが返され、data変数に格納されます。

0
user2177283

あなたのURLは最近は動きませんが、あなたのコードは次のような実用的な解決策で更新することができます：

var 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";

url = 'https://google.com'; // TEST URL

$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURI(url), function(data) {
    $('div.ajax-field').html(data);
});
<div class="ajax-field"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0
350D