访问-控制-允许-起源错误发送一个 jQuery 帖子到 Google API

我读了很多关于“访问控制-允许-起源”错误的文章，但是我不明白我需要修复什么: (

我使用的是 Google汇问 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 标头，而且我不知道如何在没有 before Call from $的情况下做到这一点。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 -->
659044 次浏览
小开
最佳答案

我解决了将 dataType 参数修改为 DataType: ‘ jsonp’并添加 交叉域名: 正确的 Access-Control-allow-Origin 错误

$.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
});
小开

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

另外，重要的是要注意，如果您的 URL 属于不同的域(跨域) ，或者您正在使用 JSONP，那么您就不能使用 $.ajax进行同步调用。只允许异步调用。

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

小开

我有完全相同的问题，它不是跨域，但相同的域。我只是将这一行添加到处理 ajax 请求的 php 文件中。

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

多亏了那张海报，效果非常好

小开

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

在我的例子中，子域名导致了问题

我使用的是 app_development.something.com，这里下划线(_)子域正在创建 CORS 错误。

小开

有一个小黑客与 php。它不仅适用于谷歌，还适用于任何你不能控制和不能添加访问控制-允许-起源 * 的网站

我们需要创建 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

我们可以创建事件 onClick，把这个事件放在某个按钮上。 希望这个能帮上忙！

小开

试试我的代码 在 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");

提交答案