Kesalahan Access-Control-Allow-Origin mengirim jQuery Post ke Google API

Saya banyak membaca untuk kesalahan 'Access-Control-Allow-Origin', tapi saya tidak mengerti apa yang harus saya perbaiki :(

Saya bermain dengan Google Moderator API, tetapi ketika saya mencoba untuk menambahkan seri baru saya menerima:

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.

Saya mencoba dengan dan tanpa parameter panggilan balik, saya mencoba menambahkan 'Access-Control-Allow-Origin *' ke header. Dan saya tidak tahu cara menggunakan $. GetJSON di sini, jika berlaku, karena saya harus menambahkan header Otorisasi dan saya tidak tahu bagaimana melakukannya tanpa sebelumnya. Panggil dari $ .ajax: /

Adakah terang untuk kegelapan ini uu?

Itulah kodenya:

<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 -->

Saya memecahkan kesalahan Access-Control-Allow-Origin memodifikasi parameter dataType ke dataType: 'jsonp' dan menambahkan 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
});

Saya memiliki masalah yang sama persis dan itu bukan domain silang tetapi domain yang sama. Saya baru saja menambahkan baris ini ke file php yang menangani permintaan ajax.

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

Itu bekerja seperti pesona. Terima kasih untuk posternya

Jika Anda memiliki kesalahan ini mencoba untuk menggunakan layanan yang Anda tidak dapat menambahkan header Access-Control-Allow-Origin *di aplikasi itu, tetapi Anda dapat menempatkan di depan server proxy terbalik, kesalahan dapat dihindari dengan penulisan ulang header.

Dengan asumsi aplikasi berjalan pada port 8080 (domain publik di www.mydomain.com ), dan Anda meletakkan proxy terbalik di host yang sama di port 80, ini adalah konfigurasi untuk proxy reverse 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 *;
    }   
}

Ya, saat jQuery melihat URL milik domain yang berbeda, ia menganggap panggilan itu sebagai panggilan lintas domain, sehingga crossdomain:truetidak diperlukan di sini.

Juga, penting untuk dicatat bahwa Anda tidak dapat membuat panggilan sinkron dengan $.ajaxjika URL Anda milik domain lain (lintas domain) atau Anda menggunakan JSONP. Hanya panggilan async yang diizinkan.

Catatan: Anda dapat memanggil layanan secara sinkron jika Anda menentukan async:falsedengan permintaan Anda.

Dalam kasus saya, nama sub domain menyebabkan masalah. Berikut detailnya

Saya menggunakan app_development.something.com, di sini menggarisbawahi ( _) sub domain membuat kesalahan CORS. Setelah mengubah app_developmentke app-developmenthasil yang baik.

Ada sedikit hack dengan php. Dan itu bekerja tidak hanya dengan Google, tetapi dengan situs web apa pun yang tidak Anda kontrol dan tidak dapat menambahkan Access-Control-Allow-Origin *

Kita perlu membuat file-PHP (mis. GetContentFromUrl.php ) di server web kami dan membuat sedikit trik.

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': '/programming/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');
    }
});

Bagaimana itu bekerja:

1. Browser Anda dengan bantuan JS akan mengirimkan permintaan ke server Anda
2. Server Anda akan mengirim permintaan ke server lain dan mendapat balasan dari server lain (situs web apa pun)
3. Server Anda akan mengirim balasan ini ke JS Anda

Dan kita dapat membuat acara diKlik, letakkan acara ini di beberapa tombol. Semoga ini bisa membantu!