http authを持つajaxで外部Webページの特定の部分を取得

Question

私のWebページでajaxリクエストを通じて外部Webページのコンテンツ（特定の部分）を読み込もうとしています。だから、

http://useraname:password@X.X.X.X:PORT

に従うよう要求に対する curl URLは、私はCross-Origin Request Blocked:（これは私にCORSエラーを与えるWebページ

var username,password; 
$.ajax 
    ({ 
    type: "GET", 
    url: "http://X.X.X.X:PORT/", 
    dataType: 'text/html', 
    async: false, 
crossDomain: true, 
    data: '{"username": "username", "password" : "secret"}', 
    success: function(){ 
    alert('Thanks for your comment!'); 
    }, 
error: function (err){ 
alert(err); 
}, 
beforeSend: function (xhr) { 
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password)); 
} 
}); 

を取得するには、以下のAJAX呼び出しを試されます）。 dataTypeをtext/htmlからjsonpに変更した後。 "0x80004005の（NS_ERROR_FAILURE）" 場所： "JSフレーム:: https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js :: .send ::ライン5" データIは、次のエラー

[例外... "失敗" nsresultで応答を受信しました： no]

いずれの場合でもajax呼び出しの成功部分は実行されません。それだけエラー部分に行きます。私がページを受け取った場合、以下の方法で特定の部分を取り出すことができます。

var data = $.parseHTML(res); //<----try with $.parseHTML(). 
    $(data).find('div.content').each(function(){ 
     $('#here').append($(this).html()); 

どのように必要な結果を得るには？

@GuRuの提案の後、私は以下を試しましたが、まだ成功メソッドが呼び出されていません。 JSONテキストの

var username,password; 
$.ajax({ 
    type: "GET", 
    url: "http://X.X.X.X:PORT/", 
    data: '{"username": "user", "password" : "secret"}', 
    async:true, 
    dataType : 'jsonp', 
    crossDomain:true, 
    success: function(){ 
    alert('Thanks for your comment!'); 
    }, 
    beforeSend: function(xhr) { 
    xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password)); 
    } 
    }); 

Answer 1

：

JSONテキストのMIMEメディアタイプはapplication/jsonです。デフォルトのエンコーディングはUTF-8です。 （出典：RFC 4627）。 JSONPについては

コールバックを持つ：ここで

application/javascript

は関連しているコメントで言及されたいくつかのブログの記事です。

A rather complete list of Mimetypes and what to use them for

Internet Explorer sometimes has issues with application/json

Why you shouldn't use text/html for JSON

、これを試してみてください What is the correct JSON content type?

Answer 2

あなたを助ける私の事を確認してください。

var username,password; 
$.ajax({ 
    type: "GET", 
    url: "http://X.X.X.X:PORT/", 
    data: '{"username": "username", "password" : "secret"}', 
    async:true, 
    dataType : 'jsonp', //you may use jsonp for cross origin request 
    crossDomain:true, 
    success: function(){ 
     alert('Thanks for your comment!'); 
    }, 
    beforeSend: function(xhr) { 
    xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password)); 
    } 
}); 

これは私の仕事です。これはXMLHttpRequestを使って試してみてください。 XMLHttpRequestオブジェクトは、サーバーとデータを交換するために使用されます。

var request = new XMLHttpRequest(); 
var params = "user=123&&password=456"; 
request.open('POST', 'https://www.example.com/controllers/Authentication.php', true); 
request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");}; 
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
request.setRequestHeader("Content-length", params.length); 
request.setRequestHeader("Connection", "close"); 
request.send(params);