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

143

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 -->
rubdottocom
sumber
1
bisakah Anda menempatkan kode Anda sedikit lebih lengkap? Saya tidak dapat menjalankan kode Anda.
Hosein Aqajani

Jawaban:

249

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
});
rubdottocom
sumber
20
Saya pikir itu crossDomain:truetidak diperlukan. Pemahaman saya adalah bahwa itu hanya diperlukan jika Anda membuat permintaan di domain Anda sendiri tetapi ingin jQuery memperlakukannya seperti permintaan lintas-domain.
Alex W
7
crossDomaintidak dibutuhkan. ini adalah jsonppermintaan reguler yang dimaksudkan untuk komunikasi lintas domain.
hitautodestruct
50
Saya mendapatkan kesalahan yang sama, tetapi saya ingin mengirim permintaan. jsonp tidak akan mendukung POST. Bagaimana saya bisa menyelesaikan ini?
iamjustcoder
7
Anda juga mengubah metode Anda dari POST ke GET
Dave Baghdanov
5
@rubdottocom bagaimana jika url mengembalikan respons xml alih-alih json ...?
Developer Desk
43

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

Muhammad Tanweer
sumber
29
Ini sangat tidak aman. Jika ada yang berhasil menyuntikkan javascript ke halaman Anda, mereka dapat dengan mudah "menelepon ke rumah" informasi apa pun yang mungkin diberikan pengguna.
dclowd9901
@ dclowd9901: "Tidak aman" adalah relatif tergantung pada tujuan penggunaan dan langkah-langkah yang diamati untuk mengatur header Access-Control-Allow-Origin ke anonim di antara alasan lainnya.
nyedidikeke
6

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 *;
    }   
}
Mariano Ruiz
sumber
2
Seperti disebutkan di atas menggunakan '*' sangat tidak aman.
Adaddinsane
5
Ya, tapi tergantung apa yang Anda buka. Jika Anda menerbitkan API publik tanpa otorisasi, begitulah (kasus saya). Jika tidak, Anda shoud menggunakan somethig seperti ini: Access-Control-Allow-Origin: http://example.com.
Mariano Ruiz
2
ketika saya menguji api melalui tukang pos dan ajax. tetapi permintaan tukang pos berhasil. tapi di ajax return false.
Araf
@Araf tukang pos dan aplikasi lain tidak memicu perlindungan CORS yang dibangun ke dalam browser.
SenseiHitokiri
6

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.

Vivek Jain
sumber
0

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.

Nol
sumber
0

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!

dfox
sumber