Access-Control-Allow-Origin - localhost

时间:2012-12-15 15:12:21

标签: jquery ajax json api http-headers

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

响应标头可能存在问题(我自己创建了API,之前没有经验),但是如果直接在浏览器中访问网址,则会收到200 OK。

如果直接在浏览器中访问url,则会显示有效的json,因此不应该是问题。

如何解决这个问题?

注意:网址是一个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

接头

响应标题:

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

响应

这里没什么......

5 个答案:

答案 0 :(得分:20)

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

使用JSONP

您可以在服务器上实现对JSONP(带填充的JSON)的支持(即Fergus Morrow's solution)。 JSONP开箱即用的跨域工作,基本上是JSON填充函数调用。

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

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

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

您还可以使用快捷方式通过向请求网址添加?callback=?来告诉jQuery您正在请求JSONP。

使用Access-Control-Allow-Origin

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

Access-Control-Allow-Origin: *

以上内容将允许任何资源使用服务跨域。阅读下面链接的文章,了解有关如何配置Access-Control-Allow

的更多信息

如果您想了解更多有关Access-Control-Origin和CORS的信息,我建议this article on MDN

答案 1 :(得分:7)

尝试并实施某种形式的JSONP机制。如果你正在使用PHP,它可能就像这样简单......

/* If a callback has been supplied then prepare to parse the callback
 ** function call back to browser along with JSON. */
$jsonp = false;
if ( isset( $_GET[ 'callback' ] ) ) {
    $_GET[ 'callback' ] = strip_tags( $_GET[ 'callback' ] );
    $jsonp              = true;

    $pre  = $_GET[ 'callback' ] . '(';
    $post = ');';
} //isset( $_GET[ 'callback' ] )

/* Encode JSON, and if jsonp is true, then ouput with the callback
 ** function; if not - just output JSON. */
$json = json_encode( /* data here */ );
print( ( $jsonp ) ? $pre . $json . $post : $json );

所有这一切都是检查$_GET var,称为回调,然后将输出包装在函数调用中 - 将$_GET['callback']名称作为函数名称。

然后你的AJAX调用会变成这样......

$.ajax({
  type: 'GET',
  url: '/* script here */ ', 
  data: /* data here - if any */,
  contentType: "jsonp", // Pay attention to the dataType/contentType
  dataType: 'jsonp', // Pay attention to the dataType/contentType
  success: function (json) {
    /* call back */
  }
});

当jQuery被赋予'jsonp'作为dataType / contentType时,它将负责为您提供回调函数名称 - 并设置回调函数等;这意味着你不必做任何事情!

来自jQuery文档:

  

“jsonp”:使用JSONP加载JSON块。添加额外的“?callback =?”到URL的末尾以指定回调。通过将查询字符串参数“_ = [TIMESTAMP]”附加到URL来禁用缓存,除非缓存选项设置为true。

Source

结束; JSONP将是你最好的选择 - 我已经包含了PHP代码,因为你的服务器端脚本正在使用PHP;如果没有那么原则是相同的。不管服务器端技术如何,jQuery /客户端的东西都保持不变。 (一般

祝你好运:)

答案 2 :(得分:7)

我通过在服务器代码(php)中添加以下标题以非常简单的方式解决了它:

header('Access-Control-Allow-Origin: *');

答案 3 :(得分:3)

如果它是ASP.NET WEB应用程序,那么您也可以将它放在Global.aspx中:

HttpContext.Current.Response.AddHeader(“Access-Control-Allow-Origin”,“*”);

答案 4 :(得分:2)

更多PHP标头设置

header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type');

祝你好运