এজেএক্সের সাথে ক্রস-ডোমেন শেষ পয়েন্ট লোড হচ্ছে


131

আমি এজেএক্স ব্যবহার করে একটি ক্রস-ডোমেন এইচটিএমএল পৃষ্ঠা লোড করার চেষ্টা করছি তবে ডেটা টাইপ "jsonp" না হওয়া পর্যন্ত আমি কোনও প্রতিক্রিয়া পেতে পারি না। তবে jsonp ব্যবহার করে ব্রাউজারটি একটি স্ক্রিপ্ট মাইম প্রকারের প্রত্যাশা করছে তবে "পাঠ্য / এইচটিএমএল" পাচ্ছে।

অনুরোধের জন্য আমার কোডটি হ'ল:

$.ajax({
    type: "GET",
    url: "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute",
    dataType: "jsonp",
}).success( function( data ) {
    $( 'div.ajax-field' ).html( data );
});

অনুরোধের জন্য jsonp ব্যবহার এড়ানো কোন উপায় আছে? আমি ইতিমধ্যে ক্রসডোমাইন প্যারামিটারটি ব্যবহার করার চেষ্টা করেছি কিন্তু এটি কার্যকর হয়নি।

যদি না হয় তবে jsonp এ এইচটিএমএল সামগ্রী পাওয়ার কোনও উপায় আছে? বর্তমানে কনসোলটি jsonp জবাবটিতে "অপ্রত্যাশিত <" বলছে।


এখানে ব্যাখ্যা হিসাবে একটি প্রক্সি.এফপি তৈরি করে সমস্যার সমাধান করেছি scode7.blogspot.com/2019/11/…
কোডডেজ্ক

উত্তর:


235

jQuery অ্যাজাক্স নোটস

  • ব্রাউজার সুরক্ষা বিধিনিষেধের কারণে, বেশিরভাগ অ্যাজাক্স অনুরোধগুলি একই উত্স নীতি সাপেক্ষে ; অনুরোধটি কোনও অন্য ডোমেন, সাবডোমেন, পোর্ট বা প্রোটোকল থেকে সাফল্যের সাথে ডেটা পুনরুদ্ধার করতে পারে না।
  • স্ক্রিপ্ট এবং জেএসএনপি অনুরোধগুলি একই উত্স নীতি সীমাবদ্ধতার অধীন নয়।

ক্রস-ডোমেন বাধা অতিক্রম করার কিছু উপায় রয়েছে :

কিছু প্লাগইন রয়েছে যা ক্রস-ডোমেন অনুরোধগুলিতে সহায়তা করে:

মাথা উঁচু করে!

এই সমস্যাটি কাটিয়ে ওঠার সর্বোত্তম উপায় হ'ল ব্যাক-এন্ডে আপনার নিজস্ব প্রক্সি তৈরি করা, যাতে আপনার প্রক্সিটি অন্য ডোমেনগুলির পরিষেবাগুলিতে নির্দেশ করবে কারণ ব্যাক-এন্ডে একই উত্স নীতি সীমাবদ্ধতা বিদ্যমান নেই । তবে যদি আপনি ব্যাক-এন্ডে এটি করতে না পারেন তবে নিম্নলিখিত টিপসগুলিতে মনোযোগ দিন।


সতর্কবাণী!

তৃতীয় পক্ষের প্রক্সিগুলি ব্যবহার করা কোনও নিরাপদ অনুশীলন নয়, কারণ তারা আপনার ডেটা ট্র্যাক করতে পারে, তাই এটি জনসাধারণের তথ্যের সাথে ব্যবহার করা যেতে পারে, তবে কখনও ব্যক্তিগত ডেটা ব্যবহার করে না।


কোড উদাহরণ নিচে ব্যবহার দেখানো jQuery.get () এবং jQuery.getJSON () , উভয়ের সাধারণভাবে সংক্ষেপে পদ্ধতি jQuery.ajax ()


কর্স যে কোনও জায়গায় Any

CORS যে কোনও জায়গায় একটি নোড.জেএস প্রক্সি যা প্রক্সাইড অনুরোধে সিওআরএস শিরোনাম যুক্ত করে।
এপিআই ব্যবহার করতে, কেবলমাত্র ইউআরএল ইউআরএলটি সহ প্রিফিক্স করুন। (সমর্থন HTTPS : দেখুন GitHub সংগ্রহস্থলের )

যদি প্রয়োজন হয় তবে স্বয়ংক্রিয়ভাবে ক্রস-ডোমেন অনুরোধগুলি সক্ষম করতে চাইলে নীচের স্নিপেটটি ব্যবহার করুন:

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});

$.get(
    'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});


আদি যাই হোক না কেন

অরিজিন যাই হোক না কেন এটি ক্রস ডোমেন জসনপ অ্যাক্সেস। এটি anyorigin.com এর ওপেন সোর্স বিকল্প ।

Google.com থেকে ডেটা আনতে , আপনি এই স্নিপেটটি ব্যবহার করতে পারেন:

// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options: 
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
    scriptCharset: "utf-8", //or "ISO-8859-1"
    contentType: "application/json; charset=utf-8"
});

$.getJSON('http://whateverorigin.org/get?url=' + 
    encodeURIComponent('http://google.com') + '&callback=?',
    function (data) {
        console.log("> ", data);

        //If the expected response is text/plain
        $("#viewer").html(data.contents);

        //If the expected response is JSON
        //var response = $.parseJSON(data.contents);
});


CORS প্রক্সি

কোনও ওয়েবসাইটের জন্য সিওআর অনুরোধ সক্ষম করার জন্য সিওআরএস প্রক্সি একটি সাধারণ নোড.জেএস প্রক্সি । এটি আপনার সাইটে জাভাস্ক্রিপ্ট কোডটিকে অন্য ডোমেনগুলির সংস্থানগুলিতে অ্যাক্সেস করার অনুমতি দেয় যা সাধারণত একই-উত্স নীতিমালার কারণে অবরুদ্ধ থাকে।

এটা কিভাবে কাজ করে? সিওআরএস প্রক্সি ক্রস-অরিজিন রিসোর্স ভাগ করে নেওয়ার সুবিধা গ্রহণ করে যা এইচটিএমএল 5-এর সাথে যুক্ত করা একটি বৈশিষ্ট্য যা সার্ভারগুলি নির্দিষ্ট করতে পারে যে তারা ব্রাউজারগুলি অন্য ওয়েবসাইটগুলিকে তারা হোস্ট করা সংস্থানগুলির অনুরোধ করতে মঞ্জুর করতে চায়। সিওআরএস প্রক্সি কেবল একটি এইচটিটিপি প্রক্সি যা "যে কেউ এটির জন্য অনুরোধ করতে পারে" বলে প্রতিক্রিয়াগুলিতে শিরোনাম যুক্ত করেছে adds

এটি লক্ষ্য অর্জনের অন্য উপায় ( www.corsproxy.com দেখুন )। আপনাকে যা করতে হবে তা হ'ল স্ট্রিপ http: // এবং www। ইউএসএল থেকে অনুমান করা হচ্ছে এবং এর সাথে ইউআরএল প্রিপেন্ড করুনwww.corsproxy.com/

$.get(
    'http://www.corsproxy.com/' +
    'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});


CORS প্রক্সি ব্রাউজার

সম্প্রতি আমি এটি পেয়েছি, এটিতে বিভিন্ন সুরক্ষামুখী ক্রস অরিজিন রিমোট শেয়ারিং ইউটিলিটি জড়িত। এটি ব্যাকএন্ড হিসাবে ফ্ল্যাশ সহ একটি কালো বাক্স।

আপনি এটি এখানে ক্রিয়াতে দেখতে পারেন: সিওআরএস প্রক্সি ব্রাউজারটি
গিটহাবের উত্স কোড পান: কোটো / কর্স-প্রক্সি-ব্রাউজার



1
চিত্র, সিএসএস এবং বাহ্যিক জাভাস্ক্রিপ্ট অন্য উত্স থেকে রেফারেন্স করা যেতে পারে, সুতরাং, প্রতিক্রিয়া হিসাবে আপনি এইচটিএমএল স্ট্রিংয়ের ওপরে যেতে পারেন এবং বহিরাগত সংস্থার এসআরসি প্রতিস্থাপন করতে পারেন
jherax

1
হাই ঝেড়াক্স আমি এইচটিএমএল পৃষ্ঠা পেতে যা যাওরিগিন ব্যবহার করেছি (কেবলমাত্র আমার জন্য কাজ করেছে, ইউকিএল, গুগল ইত্যাদি ব্যবহার করেছেন) তবে অ ইংরেজী অক্ষরগুলি অদ্ভুত। ডেটা কনটেন্টগুলি এনকোড করার চেষ্টা করেছে তবে সহায়তা হয়নি
ব্যবহারকারী 217648

1
হ্যালো @ মিরু, শিরোনাম অনুসারে: "jQuery AJAX সহ ক্রস ডোমেন এইচটিএমএল পৃষ্ঠা লোড করা হচ্ছে", আমি শিরোনামের জবাব ক্রস-ডোমেন অনুরোধগুলি সম্পাদন করার জন্য একটি প্রক্সি ব্যবহার করে প্রদান করেছি। এছাড়াও, প্রশ্নের শব্দটির জবাবে, আমি ওয়াইকিউএল দিয়ে জেএসএনপি ব্যবহার করে ক্রস-ডোমেন অনুরোধগুলি করার জন্য কিছু লিঙ্ক সরবরাহ করেছি। আমি আপনাকে লিঙ্কগুলি পড়তে আমন্ত্রণ জানিয়েছি, সেগুলি খুব কার্যকর।
ঝেরেক্স

1
এর সাথে সিওআরএস যে কোনও জায়গায় পদ্ধতি ব্যবহার করে শেষ হয়েছে $.ajaxPrefilterএবং এটি দুর্দান্ত কাজ করেছে। অনেক ধন্যবাদ!
জোশুয়া পিন্টার

24

আপনি আজাক্স-ক্রস-উত্স একটি jQuery প্লাগইন ব্যবহার করতে পারেন। এই প্লাগইনটি দিয়ে আপনি jQuery.ajax()ক্রস ডোমেন ব্যবহার করেন । এটি অর্জনের জন্য এটি Google পরিষেবাদি ব্যবহার করে:

এজেএক্স ক্রস অরিজিন প্লাগইনটি গুগল অ্যাপস স্ক্রিপ্টকে একটি প্রক্সি জেএসএন গেটর হিসাবে ব্যবহার করে যেখানে জেএসএনপি প্রয়োগ করা হয়নি। আপনি যখন ক্রসআরগিন অপশনটি সত্যে সেট করেন, প্লাগইনটি মূল ইউআরএলটি গুগল অ্যাপস স্ক্রিপ্ট ঠিকানার সাথে প্রতিস্থাপন করে এবং এনকোডেড url প্যারামিটার হিসাবে প্রেরণ করে। গুগল অ্যাপস স্ক্রিপ্ট দূরবর্তী ডেটা পেতে গুগল সার্ভার সংস্থানগুলি ব্যবহার করে এবং এটি ক্লায়েন্টকে জেএসওএনপি হিসাবে ফিরিয়ে দেয়।

এটা ব্যবহার করা খুবই সহজ:

    $.ajax({
        crossOrigin: true,
        url: url,
        success: function(data) {
            console.log(data);
        }
    });

আপনি এখানে আরও পড়তে পারেন: http://www.ajax-cross-origin.com/


21
যতদূর আমি উদ্বিগ্ন, এই প্লাগইনটি কখনও কাজ করে না। এটি ক্রোমে কিছু করে না।
মাইকেল

আমি কীভাবে সার্ভারে প্রমাণীকরণ করতে পারি?
sttaq

দুর্দান্ত কাজ! আমি যে এপিআইটি ব্যবহার করছি তা জেএসওএনপি বা কর্সকে সমর্থন করে না তাই এটিই কাজ করে। অনেক ধন্যবাদ!
জেপি লিউ

jQuery এর crossOriginবিকল্প অবশ্যই সম-উত্স নীতিগুলি হ্রাস করতে কিছুই করে না। আমি যদি এই উত্তরটি মুছতে পারি তবে আমি
ফিল

13

যদি বাহ্যিক সাইটটি JSONP বা CORS সমর্থন না করে তবে আপনার একমাত্র বিকল্প একটি প্রক্সি ব্যবহার করা।

আপনার সার্ভারে এমন একটি স্ক্রিপ্ট তৈরি করুন যা সেই সামগ্রীটির জন্য অনুরোধ করে, তারপরে আপনার সার্ভারে স্ক্রিপ্টটি আঘাত করতে jQuery এজাক্স ব্যবহার করুন।


5

এটি কেবল আপনার পিএইচপি পৃষ্ঠার শিরোনামে রেখে দিন এবং এটি এপিআই ব্যতীত খারাপ কাজ করবে:

header('Access-Control-Allow-Origin: *'); //allow everybody  

অথবা

header('Access-Control-Allow-Origin: http://codesheet.org'); //allow just one domain 

অথবা

$http_origin = $_SERVER['HTTP_ORIGIN'];  //allow multiple domains

$allowed_domains = array(
  'http://codesheet.org',
  'http://stackoverflow.com'
);

if (in_array($http_origin, $allowed_domains))
{  
    header("Access-Control-Allow-Origin: $http_origin");
}

আমি ভাবছি কোথা $_SERVER['HTTP_ORIGIN']থেকে আসছে? আমি এটি পিএইচপি ডকুমেন্টেশনে বা অন্য কোথাও খুঁজে পাইনি।
Zsolti

হুম, মনে হচ্ছে এটি কেবল এজেএক্স অনুরোধের সাথেই জনবহুল। যাইহোক, উত্তরের জন্য ধন্যবাদ।
Zsolti

0

এই মুহূর্তে কেউ যদি আমার একই সমস্যার মুখোমুখি হয় তবে আমি এটি পোস্ট করছি this আমি একটি জেব্রা তাপীয় প্রিন্টার পেয়েছি, জেব্রা নেট প্রিন্ট সার্ভারের সাথে সজ্জিত, যা একাধিক সেটিংস সম্পাদনা, প্রিন্টারের বর্তমান অবস্থা ইত্যাদি দেখতে একটি HTML- ভিত্তিক ব্যবহারকারী ইন্টারফেস সরবরাহ করে, প্রিন্টারের স্থিতি পাওয়া দরকার যা প্রদর্শিত হয়েছে এই সব এইচটিএমএল পৃষ্ঠাগুলির একটিতে, জেব্রানেট সার্ভার দ্বারা প্রদত্ত এবং উদাহরণস্বরূপ, ব্রাউজারে ব্যবহারকারীকে সতর্কতা () সতর্কতা। এর অর্থ এই যে এইচটিএমএল পৃষ্ঠাটি আমি প্রথমে জাভাস্ক্রিপ্টে পেয়েছি। প্রিন্টারটি ব্যবহারকারীর পিসির ল্যানের মধ্যে থাকলেও সেই একই উত্স নীতিএখনও আমার পথে দৃ .়ভাবে থাকছে। আমি জেএসএনপি চেষ্টা করেছি, তবে সার্ভারটি এইচটিএমএল ফেরত দেয় এবং এর কার্যকারিতা সংশোধন করার কোনও উপায় আমি পাইনি (যদি আমি পারতাম তবে আমি ইতিমধ্যে ম্যাজিক শিরোনামটি অ্যাক্সেস-কন্ট্রোল-অনুমতি-উত্স নির্ধারণ করতে পারি: *)। তাই আমি সি # তে একটি ছোট কনসোল অ্যাপ্লিকেশন লেখার সিদ্ধান্ত নিয়েছি। এটি সঠিকভাবে কাজ করতে অ্যাডমিন হিসাবে চালাতে হবে, অন্যথায় এটি ট্রল করে: ডি ব্যতিক্রম। এখানে কিছু কোড রয়েছে:

// Create a listener.
        HttpListener listener = new HttpListener();
        // Add the prefixes.
        //foreach (string s in prefixes)
        //{
        //    listener.Prefixes.Add(s);
        //}
        listener.Prefixes.Add("http://*:1234/"); // accept connections from everywhere,
        //because the printer is accessible only within the LAN (no portforwarding)
        listener.Start();
        Console.WriteLine("Listening...");
        // Note: The GetContext method blocks while waiting for a request. 
        HttpListenerContext context;
        string urlForRequest = "";

        HttpWebRequest requestForPage = null;
        HttpWebResponse responseForPage = null;
        string responseForPageAsString = "";

        while (true)
        {
            context = listener.GetContext();
            HttpListenerRequest request = context.Request;
            urlForRequest = request.RawUrl.Substring(1, request.RawUrl.Length - 1); // remove the slash, which separates the portNumber from the arg sent
            Console.WriteLine(urlForRequest);

            //Request for the html page:
            requestForPage = (HttpWebRequest)WebRequest.Create(urlForRequest);
            responseForPage = (HttpWebResponse)requestForPage.GetResponse();
            responseForPageAsString = new StreamReader(responseForPage.GetResponseStream()).ReadToEnd();

            // Obtain a response object.
            HttpListenerResponse response = context.Response;
            // Send back the response.
            byte[] buffer = System.Text.Encoding.UTF8.GetBytes(responseForPageAsString);
            // Get a response stream and write the response to it.
            response.ContentLength64 = buffer.Length;
            response.AddHeader("Access-Control-Allow-Origin", "*"); // the magic header in action ;-D
            System.IO.Stream output = response.OutputStream;
            output.Write(buffer, 0, buffer.Length);
            // You must close the output stream.
            output.Close();
            //listener.Stop();

প্রশাসকের হিসাবে সেই কনসোল অ্যাপটি চালানোর জন্য সমস্ত ব্যবহারকারীর প্রয়োজন। আমি জানি এটিও বেশ ... হতাশাব্যঞ্জক এবং জটিল, তবে আপনি কোনওভাবেই সার্ভারটি সংশোধন করতে না পারার ক্ষেত্রে এটি ডোমেন পলিসি সমস্যার সমাধানের মত কাজ।

সম্পাদনা করুন: জেএস থেকে আমি একটি সাধারণ এজ্যাক্স কল করি:

$.ajax({
                type: 'POST',
                url: 'http://LAN_IP:1234/http://google.com',
                success: function (data) {
                    console.log("Success: " + data);
                },
                error: function (e) {
                    alert("Error: " + e);
                    console.log("Error: " + e);
                }
            });

অনুরোধ করা পৃষ্ঠার এইচটিএমএল ফিরিয়ে আনা হয় এবং ডেটা ভেরিয়েবলে সংরক্ষণ করা হয় ।


0

ঝেরাক্সের পরামর্শ অনুসারে স্থানীয় প্রক্সি ব্যবহার করে ডেটা ফর্মের বাহ্যিক সাইট পাওয়ার জন্য আপনি এমন একটি পিএইচপি পৃষ্ঠা তৈরি করতে পারেন যা আপনার জন্য প্রাসঙ্গিক বাহ্যিক url থেকে সামগ্রী নিয়ে আসে এবং সেই পিএইচপি পৃষ্ঠায় একটি অনুরোধ প্রেরণ না করে।

var req = new XMLHttpRequest();
req.open('GET', 'http://localhost/get_url_content.php',false);
if(req.status == 200) {
   alert(req.responseText);
}

পিএইচপি প্রক্সি হিসাবে আপনি https://github.com / bbb//pp-simple-proxy ব্যবহার করতে পারেন


0

তোমার URLএই দিন কাজ করে না, কিন্তু আপনার কোডটির এই কাজ সমাধান সঙ্গে আপডেট করা যেতে পারে:

var url = "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute";

url = 'https://google.com'; // TEST URL

$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURI(url), function(data) {
    $('div.ajax-field').html(data);
});
<div class="ajax-field"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


-2

আপনার সিওআরএস প্রক্সি দরকার যা আপনার ব্রাউজার থেকে উপযুক্ত সিওআরএস শিরোলেখগুলির সাথে অনুরোধকৃত পরিষেবার জন্য আপনার অনুরোধটিকে প্রক্স করে । এই জাতীয় পরিষেবার তালিকা নীচে কোড স্নিপেটে রয়েছে। আপনি আপনার অবস্থান থেকে এই জাতীয় পরিষেবাদিগুলির পিং দেখতে প্রদত্ত কোড স্নিপেটও চালাতে পারেন।

$('li').each(function() {
  var self = this;
  ping($(this).text()).then(function(delta) {
    console.log($(self).text(), delta, ' ms');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jdfreder/pingjs/c2190a3649759f2bd8569a72ae2b597b2546c871/ping.js"></script>
<ul>
  <li>https://crossorigin.me/</li>
  <li>https://cors-anywhere.herokuapp.com/</li>
  <li>http://cors.io/</li>
  <li>https://cors.5apps.com/?uri=</li>
  <li>http://whateverorigin.org/get?url=</li>
  <li>https://anyorigin.com/get?url=</li>
  <li>http://corsproxy.nodester.com/?src=</li>
  <li>https://jsonp.afeld.me/?url=</li>
  <li>http://benalman.com/code/projects/php-simple-proxy/ba-simple-proxy.php?url=</li>
</ul>


11
এটি কোনওভাবেই প্রশ্নের উত্তর দেয় না।
0xc0de

@ 0xc0de আমি শেষ পর্যন্ত উত্তর লিখেছি।
galeksandrp

-7

এটা বের করে আনা। পরিবর্তে এটি ব্যবহৃত।

$('.div_class').load('http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle');

আপনি যে কোডটি সেখানে ব্যবহার করেছেন তা অপ্রাসঙ্গিক। সার্ভার সাইড সিওআরএস শিরোনামগুলি কী গুরুত্ব দেয়।
কোয়ান্টিন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.