Question

我正在处理一个AJAX请求，该请求在单击按钮时调用URL - 这一切都成功运行，我可以通过检查发出请求的服务器的日志来确认GET请求。

当我在浏览器中输入此URL时，我得到一个简单的响应：

Authentication accepted 
ActionID = ABC12345677890

我试图在我的HTML中显示该响应（如果有的话，则显示错误）。这是我的剧本：

＆＃13;

$("#callContact1").click(function() {
  $.ajax({
      url: "https://www.server.com/callback.php?type=makecall",
      data: {},
      type: "GET"
    })
    .then(function(data) {
      $('#ajaxResponse').html(data).show();
    })
    .fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an requesting the call back. HTTP Status: ' + httpStatus;
      console.log('ajaxError: ' + ajaxError);
      //make alert visible 
      $('#ajaxResponse').html(ajaxError).show();
    })
})

＆＃13;

当我点击按钮进行调用时，会发出GET请求，但我在HTML中得到了这个：

There was an requesting the call back. HTTP Status: 0

检查控制台日志我看到以下条目：

[Error] Origin http://localhost is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://localhost is not allowed by Access-Control-Allow-Origin. (callback.php, line 0)
[Error] XMLHttpRequest cannot load https://www.server.com/callback.php?type=makecall due to access control checks.

这是我第一次使用AJAX请求到外部服务器，因此不确定错误是什么以及为什么我在GET请求成功时收到错误？我在本地测试并通过http://localhost语法调用页面。

Answer 1

我确实需要了解CORS并在服务器上设置响应标头。这些网站派上用场了：

https://www.html5rocks.com/en/tutorials/cors/ https://enable-cors.org http://www.test-cors.org

Answer 2

主要是CORS问题从服务器端允许访问，即allow-access-header属性，但是你可以通过以下方式进行访问

如果我理解正确，您正在使用XMLHttpRequest到与您的网页不同的域名。因此浏览器会阻止它，因为出于安全原因，它通常允许同一来源的请求。当您想要执行跨域请求时，您需要做一些不同的事情。有关如何实现这一目标的教程是使用CORS。

当您使用邮递员时，他们不受此政策的限制。引自Cross-Origin XMLHttpRequest：

jQuery AJAX处理响应 - 访问控制/允许原点

2 个答案: