Google API के लिए एक jQuery पोस्ट भेजने की एक्सेस-कंट्रोल-अनुमति-उत्पत्ति त्रुटि

Question

मैंने 'एक्सेस-कंट्रोल-अलाउंस-ओरिजिन' त्रुटि के लिए बहुत कुछ पढ़ा, लेकिन मुझे समझ नहीं आया कि मुझे क्या करना है :(

मैं 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.

मैंने कॉलबैक पैरामीटर के साथ और उसके बिना कोशिश की, मैंने हेडर में 'एक्सेस-कंट्रोल-अलाउड-ओरिजिन *' जोड़ने की कोशिश की। और मुझे पता नहीं है कि यहाँ $ .getJSON का उपयोग कैसे किया जाता है, यदि लागू होता है, क्योंकि मुझे प्राधिकरण हेडर जोड़ना है और मुझे नहीं पता है कि $ .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 -->

Comments

क्या आप कृपया अपना कोड थोड़ा और पूरी तरह से डाल सकते हैं? मैं आपका कोड नहीं चला सका।

— होजीन अकाजानी

Answer 1

मैंने डेटा-टाइप पैरामीटर को डेटा टाइप करने के लिए एक्सेस-कंट्रोल- एक्सेप्ट-ओरिजनल एरर को हल किया: डेटा टाइप करें: ' jsonp ' और एक क्रॉसडोमेन जोड़ना : ट्रू

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

Comments

मुझे नहीं लगता कि crossDomain:trueयह आवश्यक है। मेरी समझ यह है कि यह केवल तभी आवश्यक है जब आप अपने स्वयं के डोमेन पर अनुरोध कर रहे हों, लेकिन चाहते हैं कि jQuery इसे क्रॉस-डोमेन अनुरोध की तरह व्यवहार करे।

— एलेक्स डब्ल्यू

crossDomainआवश्यकता नहीं है। यह एक नियमित jsonpअनुरोध है जो क्रॉस डोमेन संचार के लिए है।

— hitautodestruct

मुझे वही त्रुटि मिल रही है, लेकिन मैं अनुरोध पोस्ट करना चाहता हूं। jsonp POST का समर्थन नहीं करेगा। मैं इसे कैसे हल कर सकता हूं?

— ५३:३३

आपने POST से GET

— डेव बगदैनोव

@rubdottocom क्या होगा अगर url json के बजाय xml प्रतिक्रिया देता है ...?

— डेवलपर डेस्क

Answer 2

मेरे पास एक ही मुद्दा था और यह क्रॉस डोमेन नहीं था लेकिन समान डोमेन था। मैंने अभी इस लाइन को php फ़ाइल में जोड़ा है जो ajax अनुरोध को संभाल रही थी।

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

इसने एक जादू की तरह काम किया। पोस्टर की बदौलत

Comments

यह बहुत असुरक्षित है। यदि कोई आपके पेज में जावास्क्रिप्ट इंजेक्षन करने का प्रबंधन करता है, तो वे आसानी से "फोन होम" कर सकते हैं जो कोई भी उपयोगकर्ता प्रदान कर सकता है।

— dclowd9901

@ dclowd9901: "असुरक्षित" स्थापित करने के लिए मनाया उपयोग और उपायों के उद्देश्य के आधार पर रिश्तेदार है पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति हैडर को गुमनाम अन्य कारणों के बीच।

— nyedidikeke

Answer 3

यदि आपके पास यह त्रुटि है कि आप किसी सेवा का उपभोग करने की कोशिश कर रहे हैं 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 *;
    }   
}

Comments

जैसा कि ऊपर बताया गया है कि '*' बहुत असुरक्षित है।

— एड्डडिन्सन

हां, लेकिन जो आप उजागर कर रहे हैं उसके आधार पर। यदि आप प्राधिकरण के बिना एक सार्वजनिक एपीआई प्रकाशित कर रहे हैं, तो यह तरीका है (मेरा मामला)। यदि नहीं करते हैं, आप हो shoud इस तरह उपयोग somethig: Access-Control-Allow-Origin: http://example.com।

— मारियानो रुइज़

जब मैं पोस्टमैन और अजाक्स के माध्यम से एक एपीआई का परीक्षण करता हूं। लेकिन डाकिया अनुरोध सफलता है। लेकिन अजाक्स में झूठी वापसी।

— अराफ

@ अराफ़ पोस्टमैन और अन्य एप्लिकेशन कॉर्स सुरक्षा को ट्रिगर नहीं करते हैं जो ब्राउज़र में बनाए जाते हैं।

— सेंसिहिटोकिरी

Answer 4

हां, जिस क्षण jQuery URL देखता है वह एक अलग डोमेन से संबंधित है, यह मानता है कि कॉल को क्रॉस डोमेन कॉल के रूप में जाना जाता है, इस प्रकार crossdomain:trueयहां आवश्यक नहीं है।

इसके अलावा, यह नोट करना महत्वपूर्ण है कि $.ajaxयदि आपका URL किसी भिन्न डोमेन (क्रॉस डोमेन) से संबंधित है या आप BSONP का उपयोग कर रहे हैं तो आप एक समकालिक कॉल नहीं कर सकते । केवल async कॉल की अनुमति है।

नोट: यदि आप async:falseअपने अनुरोध के साथ निर्दिष्ट करते हैं, तो आप सेवा को समकालिक रूप से कॉल कर सकते हैं।

Answer 5

मेरे मामले में उप डोमेन नाम समस्या का कारण बनता है। यहाँ विवरण हैं

मैंने उपयोग किया app_development.something.com, यहाँ अंडरस्कोर ( _) उप डोमेन कॉर्स त्रुटि पैदा कर रहा है। बदलने के बाद app_developmentकरने के लिए app-developmentयह ठीक काम करता है।

Answer 6

Php के साथ थोड़ा हैक है। और यह न केवल Google के साथ काम करता है, बल्कि ऐसी किसी भी वेबसाइट के साथ जिसे आप नियंत्रित नहीं करते हैं और Access-Control-Allow-Origin * नहीं जोड़ सकते हैं

हमें अपने वेबसर्वर पर PHP-file (उदा। GetContentFromUrl.php ) बनाने की जरूरत है और एक छोटी सी ट्रिक बनाएं।

पीएचपी

<?php

$ext_url = $_POST['ext_url'];

echo file_get_contents($ext_url);

?>

जे एस

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

यह काम किस प्रकार करता है:

1. जेएस की मदद से आपका ब्राउज़र आपके सर्वर को अनुरोध भेजेगा
2. आपका सर्वर किसी अन्य सर्वर को अनुरोध भेजेगा और किसी अन्य सर्वर (किसी भी वेबसाइट) से उत्तर प्राप्त करेगा
3. आपका सर्वर आपके जेएस को यह जवाब भेज देगा

और हम घटना पर क्लिक कर सकते हैं, इस घटना को कुछ बटन पर रख सकते हैं। आशा है कि यह मदद करेगा!