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

时间:2016-04-21 08:45:13

标签: jquery ajax cross-domain

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

我正在获取 No' Access-Control-Allow-Origin'标头出现在请求的资源上。起源' null'因此不允许访问。

E.g。我想检索整个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>
&#13;
&#13;
&#13;

我尝试了什么:

  • 我在我的Apache服务器(XAMPP)上运行它。发现我需要设置.htaccess需要标题添加Access-Control-Allow-Origin&#34; *&#34; (出于安全考虑,Kleene星应该用所需的URI替换) 。我用不同的.htaccess
  • 玩了很多
  • 所以现在我试图在后端没有服务器的情况下检索它,纯粹使用我在代码片段中提供的代码(从file:/// C:/运行它)

修改

解决了问题(除非有更多技巧人员提出更好的解释,否则也接受了我的答案)并从实际的角度理解情况。

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

4 个答案:

答案 0 :(得分:2)

TL; DR:

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

以非专业人士的说法解释:

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

    如果我正在运行APACHE服务器并且我想要提供一些数据 REST请求,我需要指定允许访问的客户端 我提供的服务。这是通过添加:

    在.htaccess中完成的

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

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

    标题集设置Access-Control-Allow-Origin http://www.specific_origin.com

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

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

  • 设置完毕后,即使是来自提供的脚本的请求也是如此 片段只需访问“文件”地址就可以正常工作,例如 file:///C:/tasks/crawler/index.html

答案 1 :(得分:1)

  

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

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

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

  1. 请求为a simple request
  2. 另一个域允许客户端访问其资源。
  3. 为什么您的GET请求不是简单的请求?

    在您的情况下,如果想要检索整个DOM ,则GET请求的响应的内容类型将是&text; html&#39;。而且请求不会是一个简单的请求&#34;更多。

    因此,您想要访问的其他域名必须允许您的请求:

    您的错误消息足够明确&#34; Access-Control-Allow-Origin&#34;其他服务器不提供标头。

    您如何解决问题?

    添加您的API服务器&#34; Access-Control-Allow-Origin&#34;头。请访问此网站:http://enable-cors.org/server.html

    资源:

答案 2 :(得分:0)

我确切地知道你需要什么。 我正在研究Access-Control-Allow-Origin政策,我找到了这篇很棒的帖子:Access Control Allow Origin.

答案 3 :(得分:0)

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