跨域 jQuery ajax 调用不起作用答案

【问题标题】：Cross domain jQuery ajax calls not working跨域 jQuery ajax 调用不起作用
【发布时间】：2013-01-15 15:19:24
【问题描述】：

我在处理这段代码时遇到了问题，我似乎无法让它工作。我为此调用返回的典型错误是“加载资源失败：服务器响应状态为 401（未授权）”。

$('#btnZendesk').click(function () {
      $.ajax({
          url: "https://flatlandsoftware.zendesk.com/api/v2/topics/22505987.json",
          type: 'GET',
          crossDomain: true,
          xhrFields: {
              withCredentials: true
          },
          cache: false,
          dataType: 'jsonp',
          processData: false,
          data: 'get=login',
          timeout: 2000,

          username: "test@test.com",
          password: "test",
          success: function (data, textStatus, response) {
              alert("success");
          },
          error: function (data, textStatus, response) {
              alert(data);
          }
      });

【问题讨论】：

同源策略不允许您进行跨域 AJAX 请求。
flatlandsoftware.zendesk.com/api/v2/topics/22505987.json 资源受基本身份验证保护
密码和用户名错误？
我已尝试在浏览器中访问该 json 文件，但它也表示该请求未经授权使用这些凭据。请检查您的凭据。
@gronostaj 如果实现了 CORS，则不正确。

标签： javascript jquery ajax cross-domain

【解决方案1】：

问题是您尝试访问的资源受到基本身份验证的保护。

您可以在 jQuery 回调中使用 beforeSend 来添加带有身份验证详细信息的 HTTP 标头，例如：

beforeSend: function (xhr) {
  xhr.setRequestHeader ("Authorization", "Basic XXXXXX"); 
}

您也可以使用 jQuery ajaxSetup 来实现它

$.ajaxSetup({
  headers: { 'Authorization': "Basic XXXXX" }
});

编辑

上述功能的一些链接

编辑 2

授权头构造如下：

用户名和密码连接成一个字符串"username:password"，结果字符串使用Base64编码

例子：

Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

【讨论】：

感谢您的回复。我不知道在哪里添加 beforesend 功能以及在哪里输入我的密码。会不会是 xhr.setRequestHeader ("Authorization", "Basic myusername : mypassword")？
@Michael，我刚刚添加了如何生成基本身份验证的信息。你很亲密。但不要在 : 周围放置空格，并在最终字符串之后使用 Base64。
非常感谢您的帮助。不幸的是，现在我遇到了一个更深层次的问题，似乎 zendesk 不允许跨域 AJAX 请求。太糟糕了，我在注册之前没有阅读细则；）

【解决方案2】：

我也遇到了这个问题，不知何故，由于客户端 Web 服务限制（JSONP、XDR、CORS=true），来自互联网的所有解决方案都失败或不适用

为此，我在我的页面中添加了一个 iframe，它位于客户端的服务器中。因此，当我们将数据发布到 iframe 时，iframe 然后将其发布到 Web 服务。因此，消除了跨域引用。

我们添加了双向来源检查，以确认仅授权页面将数据发布到 iframe 和从 iframe 发布数据。

希望对你有帮助

<iframe style="display:none;" id='receiver' name="receiver" src="https://iframe-address-at-client-server">
 </iframe>

//send data to iframe
var hiddenFrame = document.getElementById('receiver').contentWindow;
hiddenFrame.postMessage(JSON.stringify(message), 'https://client-server-url');

//The iframe receives the data using the code:
window.onload = function () {
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        var origin = e.origin;
        //if origin not in pre-defined list, break and return
        var messageFromParent = JSON.parse(e.data);
        var json = messageFromParent.data;

        //send json to web service using AJAX   
        //return the response back to source
        e.source.postMessage(JSON.stringify(aJAXResponse), e.origin);
    }, false);
}

【讨论】：