Access-Control-Allow-Origin-fout bij het verzenden van een jQuery-bericht naar Google API’s

Ik heb veel gelezen over de ‘Access-Control-Allow-Origin’-fout, maar ik begrijp niet wat ik moet oplossen 🙁

Ik speel met de Google Moderator API, maar wanneer ik probeer nieuwe serie toevoegenik ontvang:

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.

Ik heb geprobeerd met en zonder callback-parameter, ik heb geprobeerd ‘Access-Control-Allow-Origin *’ toe te voegen aan de header. En ik weet niet hoe ik $.getJSON hier moet gebruiken, indien van toepassing, omdat ik de Authorization-header moet toevoegen en ik weet niet hoe ik dit moet doen zonder beforeCall from $.ajax :/

Is er licht voor deze duisternis u.u?

Dat is de code:

<script src="https://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 -->

Antwoord 1, Autoriteit 100%

Ik heb de fout van de toegangscontrole-oorsprong opgelost die de DataType-parameter aanpassen aan DataType: ‘JSSP’ en het toevoegen van een Crosskomain: 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
});

Antwoord 2, Autoriteit 17%

Ik had precies hetzelfde probleem en het was geen cross-domein maar hetzelfde domein. Ik heb deze regel net toegevoegd aan het PHP-bestand dat het AJAX-verzoek afhandelde.

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

het werkte als een charme. Dank aan de poster


Antwoord 3, Autoriteit 3%

Als je deze foutmelding krijgt als je een service probeert te gebruiken die je niet kunt toevoegen aan de header Access-Control-Allow-Origin *in die applicatie, maar je kunt wel voor de server een reverse proxy, de fout kan worden vermeden met een herschrijving van de header.

Ervan uitgaande dat de applicatie draait op poort 8080 (publiek domein op www.mydomain.com), en u de reverse proxy in dezelfde host op poort 80 plaatst, is dit de configuratie voor Nginxomgekeerde proxy:

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 *;
    }   
}

Antwoord 4, autoriteit 2%

Ja, op het moment dat jQuery ziet dat de URL bij een ander domein hoort, gaat het ervan uit dat de oproep een cross-domein oproep is, dus crossdomain:trueis hier niet vereist.

Belangrijk om op te merken is dat u geen synchrone aanroep kunt doen met $.ajaxals uw URL tot een ander domein (cross-domein) behoort of als u JSONP gebruikt. Alleen asynchrone oproepen zijn toegestaan.

Opmerking: u kunt de service synchroon aanroepen als u de async:falseopgeeft bij uw verzoek.


Antwoord 5

probeer mijn code
In 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);
        });;

In 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");

Antwoord 6

In mijn geval veroorzaakt de subdomeinnaam het probleem. Hier zijn details

Ik heb app_development.something.comgebruikt, hier maakt het subdomein underscore(_) een CORS-fout. Na het wijzigen van app_developmentin app-developmentwerkt het prima.


Antwoord 7

Er is een kleine hack met php. En het werkt niet alleen met Google, maar met elke website die u niet beheert en die u geen Access-Control-Allow-Origin *

kunt toevoegen

We moeten een PHP-bestand maken (bijv. getContentFromUrl.php) op onze webserver en een trucje maken.

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

Hoe het werkt:

  1. Uw browser zal met behulp van JS een verzoek naar uw server sturen
  2. Uw server stuurt een verzoek naar een andere server en krijgt antwoord van een andere server (elke website)
  3. Uw server stuurt dit antwoord naar uw JS

En we kunnen evenementen onClick maken, zet dit evenement op een knop.
Ik hoop dat dit zal helpen!

Other episodes