jQuery.getJSON-访问控制允许原始问题

jQuery.getJSON - Access-Control-Allow-Origin Issue

本文关键字：原始 问题 许原始 getJSON- 访问控制 jQuery      更新时间：2023-09-26

我使用jQuery的$.getJSON()函数返回一组短的JSON数据。

我已经将JSON数据放在一个url上，比如example.com。我没有意识到，但当我访问同一个url时，JSON数据无法加载。我浏览了控制台，发现由于Access-Control-Allow-Origin，XMLHttpRequest无法加载。

现在，我已经通读了很多网站，它们只是说要使用$.getJSON()，这将是解决方案，但显然它不起作用。我应该在页眉或函数中更改一些内容吗？

我们非常感谢您的帮助。

很简单，使用$.getJSON()函数，在URL中只包含

callback=？

作为参数。这将把调用转换为进行跨域调用所必需的JSONP。更多信息：http://api.jquery.com/jQuery.getJSON/

您可能希望改用JSON-p（请参阅下文）。首先简单解释一下。

您提到的标题来自跨来源资源共享标准。请注意，人们实际使用的某些浏览器不支持它，而在其他浏览器（Microsoft的叹息）上，它需要使用一个特殊对象（XDomainRequest），而不是jQuery使用的标准XMLHttpRequest。它还要求您更改服务器端资源，以显式地允许其他来源（www.xxxx.com）。

要获得您请求的JSON数据，基本上有三个选项：

  1. 如果可能的话，您可以通过更正正在加载的文件的位置来最大限度地兼容，使它们与正在加载的文档具有相同的来源。（我认为您必须通过Ajax加载它们，因此会出现同源策略问题。）

  2. 使用不受SOP约束的JSON-p。jQuery在其ajax调用中内置了对它的支持（只需将dataType设置为"jsonp"，jQuery将完成所有客户端工作）。这需要服务器端的更改，但不是很大的更改；基本上，无论生成JSON响应的是什么，都只需查找一个名为"callback"的查询字符串参数，并将JSON封装在调用该函数的JavaScript代码中。例如，如果您当前的JSON响应是：

    {"weather": "Dreary start but soon brightening into a fine summer day."}

    您的脚本将查找"callback"查询字符串参数（假设参数的值为"jsop123"），并将该JSON封装在JavaScript函数调用的语法中：

    jsonp123({"weather": "Dreary start but soon brightening into a fine summer day."});

    就是这样。JSON-p是非常广泛兼容的（因为它通过JavaScript script标签工作）。然而，JSON-P仅用于GET，而不用于POST（同样是因为它通过script标签工作）。

  3. 使用CORS（与您引用的标题相关的机制）。详细信息在上面链接的规范中，但基本上：

    A。浏览器将使用OPTIONS HTTP谓词（方法）向服务器发送"飞行前"消息。它将包含它将与GET或POST一起发送的各种标头，以及标头"Origin"、"Access Control Request Method"（例如，GET或POST）和"Access Control RequestHeaders"（它想要发送的标头）。

    B。根据这些信息，您的PHP决定请求是否可以，如果可以的话，将使用"Access Control Allow Origin"、"Access Control Allow Methods"answers"Access Control允许Headers"标头及其允许的值进行响应。您不会发送任何包含该响应的正文（页面）。

    C。浏览器将查看您的响应，并查看是否允许向您发送实际的GET或POST。如果是这样，它将再次发送该请求，并带有"Origin"和各种"Access Control request xyz"标头。

    D。您的PHP会再次检查这些头，以确保它们仍然正常，如果正常，则会响应请求。

    在pseudo--代码中（我没有做太多PHP，所以我不想在这里做PHP语法）：

    // Find out what the request is asking for
corsOrigin = get_request_header("Origin")
corsMethod = get_request_header("Access-Control-Request-Method")
corsHeaders = get_request_header("Access-Control-Request-Headers")
if corsOrigin is null or "null" {
    // Requests from a `file://` path seem to come through without an
    // origin or with "null" (literally) as the origin.
    // In my case, for testing, I wanted to allow those and so I output
    // "*", but you may want to go another way.
    corsOrigin = "*"
}
// Decide whether to accept that request with those headers
// If so:
// Respond with headers saying what's allowed (here we're just echoing what they
// asked for, except we may be using "*" [all] instead of the actual origin for
// the "Access-Control-Allow-Origin" one)
set_response_header("Access-Control-Allow-Origin", corsOrigin)
set_response_header("Access-Control-Allow-Methods", corsMethod)
set_response_header("Access-Control-Allow-Headers", corsHeaders)
if the HTTP request method is "OPTIONS" {
    // Done, no body in response to OPTIONS
    stop
}
// Process the GET or POST here; output the body of the response

    再次强调这是伪代码。

相关文章：