XAMPP: JQuery Ajax - Access-Control-Origin 错误

Question

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

我收到 请求的资源上没有 'Access-Control-Allow-Origin' header。因此不允许访问来源'null'。

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

    $(document).ready(function() {
      $.ajax({
        url: "http://whosebug.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 添加 Access-Control-Allow-Origin "*" （出于安全原因，Kleene 星号应替换为所需的 URI）。我玩了很多不同的 .htaccess
所以现在我试图在后端没有服务器的情况下检索它，纯粹使用我在代码段中提供的代码（运行它来自 file:///C:/）

编辑

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

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

的另一台 PC

Answer 1

我很清楚你需要什么。我正在研究 Access-Control-Allow-Origin 策略，我发现这个很棒 post: Access Control Allow Origin.

Answer 2

TL;DR:

如果我主持 API，我需要允许 cross-origin 请求。
如果我想访问 API，托管 API 的服务器需要允许 cross-origin 个请求。
代码不是问题，我也不是运行来自 file:// 的代码片段工作正常

深入浅出的解释：

在托管服务器时，如果您想托管 API，您需要允许 服务器上的访问控制允许来源 headers。您可以指定允许哪些服务器访问 API.

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

Header 添加 Access-Control-Allow-Origin *

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

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

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

Answer 3

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

试试这些 headers:

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"

(注意这里不能用Access-Control-Allow-Origin: "*" if Allow-Credentials is "true")

Answer 4

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts.

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

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

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

为什么你的GET请求不是简单请求？

在您的情况下，如果您想要检索整个 DOM，GET 请求响应的内容类型将为 'text/html' .请求将不再是 "simple request"。

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

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

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

你的问题是怎么解决的？

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

资源：

XAMPP: JQuery Ajax - Access-Control-Origin 错误

XAMPP: JQuery Ajax - Access-Control-Origin error

ajax

jquery

cross-domain