将 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 标头，并且我不知道如何在没有 beforeCall 的情况下执行此操作。来自 $.ajax :/

黑暗中还有光吗？

这就是代码：

<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

如果您在尝试使用无法在该应用程序中添加标头 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 *;
    }   
}

Answer 4

是的，当 jQuery 看到 URL 属于不同的域时，它会假设该调用是跨域调用，因此这里不需要 crossdomain:true 。

另外，需要注意的是，如果您的 URL 属于不同的域（跨域）或者您正在使用 JSONP，则无法使用 $.ajax 进行同步调用。仅允许异步调用。

注意：如果您在请求中指定async:false，则可以同步调用该服务。

Answer 5

php 有一个小技巧。它不仅适用于 Google，还适用于您无法控制且无法添加 Access-Control-Allow-Origin 的任何网站 *

我们需要创建 PHP 文件（例如 getContentFromUrl.php ）在我们的网络服务器上并做一些小技巧。

PHP

<?php

$ext_url = $_POST['ext_url'];

echo file_get_contents($ext_url);

?>

JS

$.ajax({
    method: 'POST',
    url: 'getContentFromUrl.php', // link to your PHP file
    data: {
        // url where our server will send request which can't be done by AJAX
        'ext_url': 'https://stackoverflow.com/questions/6114436/access-control-allow-origin-error-sending-a-jquery-post-to-google-apis'
    },
    success: function(data) {
        // we can find any data on external url, cause we've got all page
        var $h1 = $(data).find('h1').html();

        $('h1').val($h1);
    },
    error:function() {
        console.log('Error');
    }
});

工作原理：

1. 您的浏览器在 JS 的帮助下将向您的服务器发送请求
2. 您的服务器将向任何其他服务器发送请求从另一台服务器（任何网站）获取回复
3. 您的服务器会将此回复发送给您的JS

我们可以在Click上创建事件，将此事件放在某个按钮上。
希望这会有所帮助！

Answer 6

试试我的代码
在 JavaScript 中

 var settings = {
              "url": "https://myinboxhub.co.in/example",
              "method": "GET",
              "timeout": 0,
              "headers": {},
            };
        $.ajax(settings).done(function (response) {
          console.log(response);
            if (response.auth) { 
                console.log('on success');
            } 
        }).fail(function (jqXHR, exception) { 
                var msg = '';
                if (jqXHR.status === '(failed)net::ERR_INTERNET_DISCONNECTED') {
                    
                        msg = 'Uncaught Error.\n' + jqXHR.responseText; 
                }
                if (jqXHR.status === 0) {
                        msg = 'Not connect.\n Verify Network.';
                } else if (jqXHR.status == 413) {
                        msg = 'Image size is too large.'; 
                }  else if (jqXHR.status == 404) {
                        msg = 'Requested page not found. [404]'; 
                } else if (jqXHR.status == 405) {
                        msg = 'Image size is too large.'; 
                } else if (jqXHR.status == 500) {
                        msg = 'Internal Server Error [500].'; 
                } else if (exception === 'parsererror') {
                        msg = 'Requested JSON parse failed.'; 
                } else if (exception === 'timeout') {
                        msg = 'Time out error.'; 
                } else if (exception === 'abort') {
                        msg = 'Ajax request aborted.'; 
                } else {
                        msg = 'Uncaught Error.\n' + jqXHR.responseText; 
                }
                console.log(msg);
        });;

在 PHP 中

header('Content-type: application/json');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET");
header("Access-Control-Allow-Methods: GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");

Answer 7

就我而言，子域名导致了问题。以下是

我使用 app_development.something.com 的详细信息，此处下划线(_) 子域正在创建 CORS 错误。将 app_development 更改为 app-development 后，它工作正常。