访问控制允许来源-本地主机

我在通过ajax接收json时遇到问题，错误如下。根据我迄今为止发现的有关该错误的信息，这似乎是某种跨域问题，但我不知道这意味着什么以及如何解决它。

响应头可能有问题（我自己创建了 API，之前没有经验），但是如果直接在浏览器中访问 url，则会收到 200 OK。

如果直接在浏览器中访问 url，会显示有效的 json，那么这应该不是问题。

如何解决这个问题？

注意：URL 指向 Apache 服务器，而不是我在 Stack 上读到的有关该问题的 95% 问题的文件。

检查员错误：

XMLHttpRequest cannot load http://localhost/api/v1/products?_=1355583847077.
Origin null is not allowed by Access-Control-Allow-Origin.
Error: error 

代码：

    $.ajaxSetup ({
      url: "http://localhost/api/v1/products", // <--- returns valid json if accessed in the browser
      type: "GET",
      dataType: "json",
      cache: false,
      contentType: "application/json"
    })
    $.ajax({
        success: function(data){

            console.log("You made it!");
        },
        error: function(xhr) {
           console.log("Error: " + xhr.statusText);
       }
    }).done(function(data){
        console.log(data);
    })

Params

_ 1355583610778

Headers

响应标头：

Connection  Keep-Alive
Content-Length  3887
Content-Type    application/json
Date    Sat, 15 Dec 2012 14:50:53 GMT
Keep-Alive  timeout=5, max=100
Server  Apache/2.2.14 (Unix) DAV/2 mod_ssl/2.2.14 OpenSSL/0.9.8l PHP/5.3.1 mod_perl/2.0.4 Perl/v5.10.1
X-Powered-By    PHP/5.3.1

请求标头：

Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language sv-SE,sv;q=0.8,en-US;q=0.5,en;q=0.3
Connection  keep-alive
Host    localhost
Origin  null
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:17.0) Gecko/17.0 Firefox/17.0

Response

这里没有什么...

是的，这绝对是一个跨域问题。但不用担心，这个问题有两种解决方案。

使用 JSONP

您可以在服务器上实现对 JSONP（带填充的 JSON）的支持（即弗格斯·莫罗的解决方案 https://stackoverflow.com/questions/13893361/#13893673）。 JSONP 跨域开箱即用，基本上是用函数调用填充的 JSON。

In your .ajaxSetup set dataType to jsonp然后在服务器端您应该确保检查名为的 url 参数callback在请求中。如果设置了该参数，则必须相应地填充 JSON 响应。

parseThis({ "json": "can", "be": "put", "in": "here" });

上面假设callback被设定为parseThis。 jQuery 将默认生成一个函数名称，但您可以通过设置值来覆盖它jsonpCallback在你的.ajaxSetup.

您还可以使用快捷方式告诉 jQuery 您正在请求 JSONP，只需添加?callback=?到请求网址。

使用访问控制允许来源

另一种解决方案是设置Access-Control-Allow-Origin您的回复中的标题。

Access-Control-Allow-Origin: *

上述将允许any跨域使用服务的资源。阅读下面链接的文章，了解有关如何配置的更多信息Access-Control-Allow.

如果您想了解有关 Access-Control-Origin 和 CORS 的更多信息，我推荐MDN 上的这篇文章 https://developer.mozilla.org/en/docs/HTTP_access_control.