XAMPP：JQuery Ajax - 访问控制源错误答案

【问题标题】：XAMPP: JQuery Ajax - Access-Control-Origin errorXAMPP：JQuery Ajax - 访问控制源错误
【发布时间】：2016-05-03 13:31:30
【问题描述】：

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

我收到一个请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'null'。

例如我想检索整个 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 需要 Header add Access-Control-Allow-Origin "*" （出于安全原因，应将 Kleene 星号替换为所需的 URI）。我玩了很多不同的 .htaccess
所以现在我尝试在没有后端服务器的情况下检索它，纯粹使用我在 sn-p 中提供的代码（从 file:///C:/ 运行它）

编辑

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

脚注：这个例子只是为了说明问题。在最终的解决方案中，我只想使用 AJAX 将 REST 请求发送到我们 VLAN 中正在运行服务器的另一台 PC。

【问题讨论】：

如果除了发送 REST 请求的计算机之外的其他任何人都不需要它，只需安装 CORS chrome 扩展程序以节省混乱。 gyazo.com/166864bc90ca7517f1b82bc150d03c20
这是我的队友要求的，仍然只有 10-15 人.. 将把这个选项提供给经理:) 谢谢
不是最佳解决方案，但到目前为止是最快的短期解决方案。我在我的 VPS 上使用它来不断更新我的数据库中的 CSGO 武器价格。

标签： jquery ajax cross-domain

【解决方案1】：

TL;DR:

如果我托管 API，我需要允许跨域请求。
如果我想访问 API，托管 API 的服务器需要允许跨域请求。
代码没有问题，我也没有从 file:// 运行它，sn-p 工作正常

更通俗的解释：

在托管服务器时，如果您想托管 API，您需要允许 Access Control Allow Origin 服务器上的标头。您可以指定允许哪些服务器访问 API。

如果我正在运行 APACHE 服务器并且我想在 REST 请求，我需要指定允许访问的客户端我提供的服务。这是在 .htaccess 中通过添加：

标头添加 Access-Control-Allow-Origin *

为了更安全，可以只允许特定来源：

标头集 Access-Control-Allow-Origin http://www.specific_origin.com
另一方面，如果另一台服务器在其域上托管 API，则服务器的管理员需要允许他们接受请求的来源从（这是我的情况）。例如，包含 API 的服务器是用python写的，所以代码如下：

self.set_header('Access-Control-Allow-Origin','*')
一旦设置，即使是来自提供的脚本中的请求 sn-p 仅通过访问 "file" 地址即可正常工作，例如 file:///C:/tasks/crawler/index.html

【讨论】：

【解决方案2】：

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

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

如果请求适用于以下任一情况，则可以提出跨源请求：

请求是a simple request
其他域允许客户端访问其资源。

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

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

因此（您要访问的）其他域必须允许您的请求：

文档origin 的权限。（null 你的情况）
request method 的权限。

您的错误消息很清楚，“Access-Control-Allow-Origin”标头不是由其他服务器提供的。

你如何解决你的问题？

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

资源：

【讨论】：

我为这个问题提供的答案是从程序员的角度写的（程序员是这个问题的初学者——我缺乏正确的词汇）。您的回答清晰且专业，我很乐意奖励它设置的赏金

【解决方案3】：

我很清楚你需要什么。我正在研究 Access-Control-Allow-Origin 政策，发现这篇很棒的帖子：Access Control Allow Origin.

【讨论】：

谁会反对这个？这是一篇非常好的文章，确实。虽然它没有解释与 jQuery 本身的接口，但它确实逐步介绍了 CORS 的基础知识。
我不是反对者，但这篇文章应该是评论，而不是答案..
我同意。已采取建议。谢谢

【解决方案4】：

您必须列出将访问服务器的所有客户端的所有地址。您还需要允许 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"

（请注意，如果 Allow-Credentials 为“true”，则此处不能使用 Access-Control-Allow-Origin:“*”）

【讨论】：