web-dev-qa-db-ja.com

Google APIにjQuery Postを送信する際のAccess-Control-Allow-Originエラー

'Access-Control-Allow-Origin'エラーについてはよく読んでいますが、修正する必要があるものがわかりません:(

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 *」を追加しようとしました。私はAuthorizationヘッダを追加する必要があり、$ .ajaxからbeforeCallなしでそれを実行する方法がわからないので、ここで$ .getJSONの使い方を知りません。

この暗闇のための光は何ですか？

それがコードです：

<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 -->
jqueryajaxgoogle-apicorsjsonp
131
rubdottocom

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
});
233
rubdottocom

私はまったく同じ問題を抱えており、クロスドメインではなく同じドメインでした。私はちょうどこのAJAX要求を処理していたphpファイルにこの行を追加しました。

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

それは魅力のように働きました。ポスターのおかげで

43
Muhammad Tanweer

はい、jQueryがURLが別のドメインに属していることを確認した瞬間には、その呼び出しをクロスドメイン呼び出しと見なします。したがって、ここではcrossdomain:trueは必要ありません。

また、URLが別のドメイン（クロスドメイン）に属している場合、またはJSONPを使用している場合は、$.ajaxを使って同期呼び出しを行うことはできません。非同期呼び出しのみが許可されています。

注：要求でasync:falseを指定した場合は、サービスを同期的に呼び出すことができます。

6
Vivek Jain

あなたがそのアプリケーションでヘッダ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 *;
    }   
}
6
Mariano Ruiz

私の場合、サブドメイン名が問題を引き起こしています。詳細はこちら

私はapp_development.something.comを使いましたが、ここではアンダースコア（_）サブドメインがCORSエラーを起こしています。 app_developmentをapp-developmentに変更した後は正常に動作します。

0
Zero