将jQuery Post发送到Google API的Access-Control-Allow-Origin错误

Question

我读了很多关于'Access-Control-Allow-Origin'的错误,但我不明白我要解决的问题:(

我正在玩Google Moderator API,但是当我尝试添加新的系列时,我会收到:

XMLHttpRequest cannot load 
https://www.googleapis.com/moderator/v1/series?key=[key]
&data%5Bdescription%5D=Share+and+rank+tips+for+eating+healthily+on+the+cheaps!
&data%5Bname%5D=Eating+Healthy+%26+Cheap
&data%5BvideoSubmissionAllowed%5D=false. 
Origin [my_domain] is not allowed by Access-Control-Allow-Origin.

我尝试使用和不使用回调参数,我尝试在标题中添加"Access-Control-Allow-Origin*".我不知道如何在这里使用$ .getJSON,如果申请,因为我必须添加Authorization标头,我不知道怎么做没有来自$ .ajax的beforeCall:/

这个黑暗的任何光明吗？

那是代码:

<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

var scope = "https://www.googleapis.com/auth/moderator";
var token = '';

function create(){
     if (token == '')
      token = doCheck();

     var myData = {
      "data": {
        "description": "Share and rank tips for eating healthily on the cheaps!", 
        "name": "Eating Healthy & Cheap", 
        "videoSubmissionAllowed": false
      }
    };

    $.ajax({

        url: 'https://www.googleapis.com/moderator/v1/series?key='+key,
        type: 'POST',
        callback: '?',
        data: myData,
        datatype: 'application/json',
        success: function() { alert("Success"); },
        error: function() { alert('Failed!'); },
        beforeSend: setHeader

    });
}

function setHeader(xhr) {

  xhr.setRequestHeader('Authorization', token);
}

function doLogin(){ 
    if (token == ''){
       token = google.accounts.user.login(scope);
    }else{
       alert('already logged');
    }
}


function doCheck(){             
    token = google.accounts.user.checkLogin(scope);
    return token;
}
</script>
...
...
<div data-role="content">
    <input type="button" value="Login" onclick="doLogin();">
    <input type="button" value="Get data" onclick="getModerator();">
    <input type="button" value="Create" onclick="create();">
</div><!-- /content -->

Answer 1

我解决了Access-Control-Allow-Origin错误,将dataType参数修改为dataType:'jsonp'并添加了一个crossDomain:true

$.ajax({

    url: 'https://www.googleapis.com/moderator/v1/series?key='+key,
    data: myData,
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    success: function() { alert("Success"); },
    error: function() { alert('Failed!'); },
    beforeSend: setHeader
});

Answer 2

我有完全相同的问题,它不是跨域而是相同的域.我刚刚将这一行添加到处理ajax请求的php文件中.

<?php header('Access-Control-Allow-Origin: *'); ?>

它就像一个魅力.感谢海报

Answer 3

是的,当jQuery看到URL属于不同的域时,它假定该呼叫是跨域调用,因此crossdomain:true这里不需要.

另外,请注意,$.ajax如果您的URL属于不同的域(跨域)或您使用的是JSONP ,则无法进行同步调用.只允许异步调用.

注意:如果您指定了async:false您的请求,则可以同步调用服务.

Answer 4

如果您尝试使用无法Access-Control-Allow-Origin *在该应用程序中添加标头的服务时出现此错误,但您可以在服务器前面放置一个反向代理,则可以通过重写标头来避免错误.

假设应用程序在端口8080(www.mydomain.com上的公共域)上运行,并且您将反向代理放在端口80的同一主机中,这是Nginx反向代理的配置:

server {
    listen      80;
    server_name www.mydomain.com;
    access_log  /var/log/nginx/www.mydomain.com.access.log;
    error_log   /var/log/nginx/www.mydomain.com.error.log;

    location / {
        proxy_pass   http://127.0.0.1:8080;
        add_header   Access-Control-Allow-Origin *;
    }   
}