通过具有http auth的ajax获取外部网页的特定部分

Get specific part of external webpage through ajax which has http auth

本文关键字：网页 外部 定部 获取 ajax http auth      更新时间：2023-09-26

我正在尝试通过网页上的ajax请求加载外部网页的内容（特定部分）。请求的curl url如下所示

http://useraname:password@X.X.X.X：端口

因此，我尝试了以下ajax调用来获取网页

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));
}
});

这给了我一个CORS错误（Cross-Origin Request Blocked:）。在将dataType从text/html改变为jsonp之后。我收到了以下错误的响应

[异常…"失败"nsresult:"0x80004005（NS_ERROR_Failure）"位置："JS帧：：https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js：：.发送：：第5行"数据：否]

在这两种情况下，ajax调用的成功部分都没有被执行。只有它进入错误部分。如果我收到页面，我可以通过以下方法获取特定部分。

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

如何获得所需的结果？

在@GuRu的建议下，我尝试了以下方法，但仍然没有成功的方法。

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));
  }
  });

对于JSON文本：

JSON文本的MIME媒体类型为application/json。默认编码为UTF-8。（来源：RFC 4627）。

对于带有回调的JSONP：

application/javascript

以下是一些相关评论中提到的博客文章。

  • 为什么不应该将text/html用于JSON
  • 互联网；Explorer有时会出现application/json问题
  • Mimetypes的完整列表以及使用它们的目的

请检查什么是正确的JSON内容类型？

试试这个，我想对你有帮助。

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);
相关文章：