XAMPP:JQuery Ajax - 访问控制源错误



我正在尝试使用JQuery ajax以便从不同域上的源中检索数据。

我收到请求的资源上不存在"访问控制允许来源"标头。因此,不允许访问源"空"。

例如,我想检索堆栈溢出主页的整个 DOM。

    $(document).ready(function() {
      $.ajax({
        url: "http://stackoverflow.com/",
        success: function(data) {
          console.log(data);
          $("h1").text("Success => check console");
        },
        error: function(data) {
          console.log(data);
          $("h1").text("Error => check console");
        }
      });
    });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test</title>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
  <h1></h1>
</body>
</html>

我尝试过:

  • 我在我的Apache服务器(XAMPP)上运行它。发现我需要将 .htaccess 需求设置为标头添加访问控制允许来源"*"(出于安全原因,Kleene 星号应替换为所需的 URI)。我用不同的 .htaccess 玩了很多
  • 所以现在我正在尝试在后端没有服务器的情况下检索它,纯粹使用我在代码片段中提供的代码(从 file:///C:/运行它)

编辑

解决了问题(也接受了我的回答,除非有更熟练的人想出更好的解释)并从实际的角度理解情况。

脚注:此示例只是为了说明问题。在最终解决方案中,我只想使用 AJAX 将 REST 请求发送到运行服务器的 VLAN 中的另一台 PC。

TL;DR:

  • 如果我托管 API,我需要允许跨源请求。
  • 如果我想访问 API,托管 API 的服务器需要允许跨源请求。
  • 代码不是问题,我也不是从 file://运行它,代码片段工作正常

通俗地说,更长的解释:

  • 托管服务器时,如果要托管API,则需要允许访问控制允许服务器上的源标头。您可以指定允许哪些服务器访问 API。

    如果我正在运行APACHE服务器,并且我想在REST 请求,我需要指定允许访问的客户端我提供的服务。这是在 .htaccess 中通过添加以下内容来完成的:

    标头添加访问控制允许源 *

    为了更安全,可以只允许特定的来源:

    标头集 Access-Control-Allow-Origin http://www.specific_origin.com

  • 另一方面,如果另一台服务器在其域上托管 API,则服务器的管理员需要允许他们接受请求的源从(这是我的情况)。例如,包含 API 的服务器是用Python编写的,所以代码如下:

    self.set_header("访问控制允许源", "*")

  • 设置后,即使是来自提供的脚本的请求代码段仅通过访问"文件"地址即可很好地工作,例如 file:///C:/tasks/crawler/index.html

出于安全原因,浏览器会限制跨源 HTTP 请求 从脚本中启动。

这称为 CORS(跨源资源共享)。向文档域以外的服务器发出 ajax 请求时存在限制。

如果请求适用于以下任一情况,则可以发出跨源请求:

  1. 请求是一个简单的请求
  2. 另一个域允许客户端访问其资源。

为什么您的GET请求不是一个简单的请求?

在您的情况下,如果您想检索整个 DOM,GET 请求响应的内容类型将为"text/html"。并且该请求将不再是"简单的请求"。

因此,另一个域(您要访问的域)必须允许您的帐户:

  • 文档来源的权限。( null 适合您的情况)
  • 请求方法的权限。

您的错误消息足够清楚,"Access-Control-Allow-Origin"标头不是由其他服务器提供的。

你如何解决你的问题?

通过添加您的API服务器" Access-Control-Allow-Origin "标头。看看这个网站: http://enable-cors.org/server.html

资源:

  • https://www.w3.org/TR/cors/
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

我确切地知道你需要什么。我正在研究访问控制允许来源策略,我发现了这个很棒的帖子:访问控制允许来源。

您必须列出将访问服务器的所有客户端的所有地址。 您还需要允许 OPTIONS,因为这是第一个请求类型。

请尝试以下标头:

Access-Control-Allow-Origin: "https://clientaddress"
Access-Control-Allow-Headers: "*, Accept, Authorization, X-Requested-With, Content-Type, Origin"
Access-Control-Allow-Methods: "GET,POST,OPTIONS"

如果要传入凭据,请使用:

Access-Control-Allow-Credentials: "true"

(请注意,如果允许凭据为"true",则不能在此处使用访问控制允许源:"*")

相关内容

  • 没有找到相关文章

最新更新