একটি কর্স পোস্টের অনুরোধ সরল জাভাস্ক্রিপ্ট থেকে কাজ করে, তবে কেন jQuery দিয়ে নয়?


88

আমি একটি ক্রস অরিজিন পোস্ট অনুরোধ করার চেষ্টা করছি, এবং আমি এটি এর JavaScriptমতো সরলভাবে কাজ করতে পারি :

var request = new XMLHttpRequest();
var params = "action=something";
request.open('POST', url, true);
request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");};
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);

তবে আমি ব্যবহার করতে চাই jQuery, তবে এটি কাজ করতে পারি না। এই আমি চেষ্টা করছি:

$.ajax(url, {
    type:"POST",
    dataType:"json",
    data:{action:"something"}, 
    success:function(data, textStatus, jqXHR) {alert("success");},
    error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
});

ফলশ্রুতিতে এর ফলস্বরূপ। কেউ যদি জানেন যে কেন jQueryকাজ করে না, দয়া করে আমাদের সবাইকে জানান। ধন্যবাদ

(আমি jQuery1.5.1 এবং ফায়ারফক্স 4.0 ব্যবহার করছি এবং আমার সার্ভারটি সঠিক Access-Control-Allow-Originশিরোনাম দিয়ে সাড়া দিচ্ছে )


আয়নিক ফ্রেমওয়ার্ক 3 নিয়ে
সিওআরএস

উত্তর:


73

আপডেট: টিমকে দেখানো হিসাবে, এটি আর jquery 1.5.2 এর সাথে প্রয়োজন নেই। তবে আপনি যদি কাস্টম শিরোনাম যুক্ত করতে চান বা শংসাপত্রগুলি (ব্যবহারকারীর নাম, পাসওয়ার্ড, বা কুকিজ, ইত্যাদি) ব্যবহারের অনুমতি দিতে চান তবে পড়ুন।


আমি মনে করি আমি উত্তর খুঁজে পেয়েছি! (4 ঘন্টা এবং পরে অনেক অভিশাপ)

//This does not work!!
Access-Control-Allow-Headers: *

আপনি স্বীকার করবেন এমন সমস্ত শিরোনাম আপনাকে ম্যানুয়ালি উল্লেখ করতে হবে (কমপক্ষে এফএফ 4.0 এবং ক্রোম 10.0.648.204 এ আমার ক্ষেত্রে এটি ছিল)।

jQuery এর aj .জ্যাক্স পদ্ধতিটি সমস্ত ক্রস ডোমেন অনুরোধের জন্য "এক্স-অনুরোধ-সহ" শিরোনাম প্রেরণ করে (আমি মনে করি এটির কেবল ক্রস ডোমেন)।

বিকল্পগুলির অনুরোধটি সাড়া দেওয়ার জন্য অনুপস্থিত শিরোনামটি হ'ল:

//no longer needed as of jquery 1.5.2
Access-Control-Allow-Headers: x-requested-with

আপনি যদি কোনও "সরল" শিরোনাম অতিক্রম করে থাকেন তবে আপনাকে সেগুলি আপনার তালিকায় অন্তর্ভুক্ত করতে হবে (আমি আরও একটি প্রেরণ করব):

//only need part of this for my custom header
Access-Control-Allow-Headers: x-requested-with, x-requested-by

সুতরাং সব একসাথে রাখার জন্য, এখানে আমার পিএইচপি:

// * wont work in FF w/ Allow-Credentials
//if you dont need Allow-Credentials, * seems to work
header('Access-Control-Allow-Origin: http://www.example.com');
//if you need cookies or login etc
header('Access-Control-Allow-Credentials: true');
if ($this->getRequestMethod() == 'OPTIONS')
{
  header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
  header('Access-Control-Max-Age: 604800');
  //if you need special headers
  header('Access-Control-Allow-Headers: x-requested-with');
  exit(0);
}

4
নোট করুন যে jQuery 1.5.2 এর আচরণ পরিবর্তন করেছে। এটি আর "এক্স-অনুরোধযুক্ত-সহ" শিরোনাম যুক্ত করে না, সুতরাং এটি আর কোনও সমস্যা হতে পারে না। blog.jquery.com/2011/03/31/jquery-152-released (বাগ 8423)
Magmatic

4
@ টিমক, আপনি ঠিক বলেছেন! আমি লক্ষ্য করি না তারা মুক্তি দেয় 1.5.2। এটি বলা হচ্ছে, আপনার যদি প্রি-ফ্লাইটেড করার প্রয়োজন হয় তবে এটি কাজ করে। আমি আমার উত্তর আপডেট করেছি।
ম্যাসন উইল

সুতরাং, আমি বিভ্রান্ত আপনি যেভাবেই একটি মধ্যবর্তী পিএইচপি স্ক্রিপ্ট লিখতে হবে? সুতরাং আপনার ঠিক তখনই অ্যাজাক্স ব্যবহারের বিষয়ে চিন্তা করার দরকার নেই? বা আমি কিছু মিস করছি কোনও জাভাস্ক্রিপ্ট কি কেবল সমাধান নেই?
এলিজাবেথ

4
@ ইলিশাবেথ এই পদ্ধতিটি কেবল তখনই কাজ করে যদি আপনি অনুরোধ করা গন্তব্যটি নিয়ন্ত্রণ করেন ... এটি কোনও মধ্যবর্তী স্ক্রিপ্ট নয়। এটি আমাদের অনুরোধ করা অবস্থানের পিএইচপি এর শীর্ষে। এটি কি আরও অর্থবোধ করে?
উইল ম্যাসন

4
হ্যাঁ! ধন্যবাদ উইল আমি ভেবেছিলাম আপনি ক্লায়েন্টের পক্ষ থেকে সমস্ত কিছু নিয়ন্ত্রণ করতে পারেন তবে মনে হচ্ছে আপনার উভয় প্রান্তের নিয়ন্ত্রণ দরকার need
এলিজাবেথ

18

আরেকটি সম্ভাবনা হ'ল সেটিংয়ের dataType: jsonকারণে জিকুয়েরি শিরোনামটি প্রেরণ করে Content-Type: application/json। এটি সিওআরএস দ্বারা একটি অ-মানক শিরোনাম হিসাবে বিবেচিত হয় এবং এর জন্য একটি সিওআরএস প্রিফলাইট অনুরোধ প্রয়োজন। তাই চেষ্টা করার জন্য কয়েকটি জিনিস:

1) সঠিক প্রাকফ্লাইট প্রতিক্রিয়াগুলি প্রেরণ করতে আপনার সার্ভারটি কনফিগার করার চেষ্টা করুন। এটি অতিরিক্ত শিরোনামের মতো Access-Control-Allow-Methodsএবং হিসাবে থাকবে Access-Control-Allow-Headers

2) dataType: jsonসেটিংসটি ড্রপ করুন । JQuery অনুরোধ করা উচিত Content-Type: application/x-www-form-urlencodedডিফল্ট ভাবে, কিন্তু ঠিক নিশ্চিত হতে, আপনি প্রতিস্থাপন করতে পারেন dataType: jsonসঙ্গেcontentType: 'application/x-www-form-urlencoded'


ধারণার জন্য ধন্যবাদ। আমি ডেটা টাইপ না সেট করার চেষ্টা করেছি এবং এটিটিকে application/x-www-form-urlencodedএমনকি এবং এমনকি সেট করার চেষ্টা করেছি text/plain। এবং আমি Access-Control-Allow-Methods "POST, GET, OPTIONS"কিছুই কাজ করার একটি প্রতিক্রিয়া শিরোনাম যোগ করার চেষ্টা করেছি ।
চৌম্বকীয়

আপনি কি জাভাস্ক্রিপ্ট ত্রুটি কনসোল (বা ফায়ারব্যাগের কনসোল) সন্ধান করতে পারেন এবং অনুরোধের সময় কোনও ত্রুটি আছে কিনা তা দেখতে পারেন? এছাড়াও, যদি আপনি ওয়্যারশার্ক ব্যবহার করতে জানেন তবে আপনি এটি ব্যবহার করতে পারেন সত্যিকারের এইচটিটিপি অনুরোধটি তারের উপর দিয়ে যাচ্ছে।
মনসুর

4
"আরেকটি সম্ভাবনা হ'ল ডেটা টাইপ সেট করা: জসন জিকুয়েরিকে সামগ্রী-প্রকার: অ্যাপ্লিকেশন / জেসন শিরোনাম প্রেরণ করে" - এটি ঘটে না। অনুরোধ শিরোনামকে dataTypeপ্রভাবিত করে তবে Acceptঅনুরোধ শিরোনামটি নয় Content-Type
কোয়ান্টিন

9

আপনি জেএসে "প্যারাম" পাঠাচ্ছেন: request.send(params);

তবে jquery এ "ডেটা" .. ডেটা সংজ্ঞায়িত হয় ?: data:data,

এছাড়াও, আপনার URL টিতে একটি ত্রুটি রয়েছে:

$.ajax( {url:url,
         type:"POST",
         dataType:"json",
         data:data, 
         success:function(data, textStatus, jqXHR) {alert("success");},
         error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
});

আপনি পোষ্টের জন্য একটিটির সাথে বাক্য গঠন মিশ্রিত করছেন


আপডেট : আমি মনসুর উত্তরের উপর ভিত্তি করে ঘুরে বেড়াচ্ছিলাম এবং আমি দেখতে পেলাম যে আপনাকে যুক্ত করতে হবে Access-Control-Allow-Headers: Content-Type(নীচে পুরো অনুচ্ছেদটি রয়েছে)

http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http- বাইন্ডিং- made-easy/

CORS কীভাবে কাজ করে

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

BOSH সংযোগ পরিচালকদের জন্য, অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্সের মান * সেট করে সমস্ত উত্স অনুমোদিত কিনা তা নির্দিষ্ট করা যথেষ্ট। সামগ্রী-প্রকারের শিরোনামটি অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-শিরোনাম শিরোনামে অবশ্যই সাদা তালিকাবদ্ধ থাকতে হবে।

শেষ অবধি, BOSH সংযোগ ব্যবস্থাপক অনুরোধ সহ নির্দিষ্ট ধরণের অনুরোধের জন্য, অনুমতিগুলি যাচাই প্রাক-ফ্লাইটেড হবে। ব্রাউজারটি একটি বিকল্পগুলির অনুরোধ করবে এবং এমন কোনও HTTP শিরোনাম ফিরে পাওয়ার আশা করবে যা নির্দেশ করে যে কোন উত্সটি অনুমোদিত, কোন পদ্ধতিগুলি অনুমোদিত এবং কতক্ষণ এই অনুমোদন স্থায়ী হবে। উদাহরণস্বরূপ, অপশনের জন্য আমি যে পাঞ্জাব এবং ইজবার্ড প্যাচগুলি ফিরিয়ে দিয়েছি তা এখানে:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type 
Access-Control-Max-Age: 86400

4
দুঃখিত হ্যাঁ. var data = {action:"something"}
চৌম্বকীয়

আপনি উভয় ফাংশনের জন্য সিনট্যাক্সটি এখানে তুলনা করতে পারেন: api.jquery.com/jQuery.post
আলোদাম

আমি এটি সেটিংসে ইউআরএল দিয়ে চেষ্টা করেছি, তবে একই সমস্যা। .Ajax ফাংশন এটি যেভাবেই নিতে পারে।
চৌম্বকীয়

ইতিমধ্যে আমি দু'টি শিরোলেখ পেয়েছি। আমি অন্য দুটি যোগ। JQuery সহ এখনও "ব্যর্থতা"। সরল জাভাস্ক্রিপ্ট এখনও কাজ করে।
চৌম্বকীয়

শেষ জিনিস আমি মনে করতে পারেন ব্যবহার করা api.jquery.com/jQuery.ajaxSetup সেটে jQuery.ajaxSetup({'beforeSend': function(xhr) {xhr.setRequestHeader(string, string)}})এবং খেলার বিভিন্ন হেডার পাঠানো (এখানে পাগল জন্য একটি উদাহরণ: railscasts.com/episodes/136-jquery )
Aleadam

1

করগুলি অনুরোধের পদ্ধতিটি শেষ হওয়ার আগেই POST থেকে অপশনগুলিতে পরিবর্তন করে, সুতরাং আপনার পোস্টের ডেটা প্রেরণ করা হবে না। এই কর্স ইস্যুটি পরিচালনা করতে যেভাবে কাজ করেছে, এজ্যাক্স দিয়ে অনুরোধটি সম্পাদন করছে, যা বিকল্পগুলি পদ্ধতি সমর্থন করে না। উদাহরণ কোড:

        $.ajax({
            type: "POST",
            crossdomain: true,
            url: "http://localhost:1415/anything",
            dataType: "json",
            data: JSON.stringify({
                anydata1: "any1",
                anydata2: "any2",
            }),
            success: function (result) {
                console.log(result)
            },
            error: function (xhr, status, err) {
                console.error(xhr, status, err);
            }
        });

সি # সার্ভারে এই শিরোনাম সহ:

                    if (request.HttpMethod == "OPTIONS")
                    {
                          response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With");
                          response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
                          response.AddHeader("Access-Control-Max-Age", "1728000");
                    }
                    response.AppendHeader("Access-Control-Allow-Origin", "*");

-2

আপনার Jquery নিম্নলিখিত উপায়ে পরিবর্তন করুন:

$.ajax({
            url: someurl,
            contentType: 'application/json',
            data: JSONObject,
            headers: { 'Access-Control-Allow-Origin': '*' }, //add this line
            dataType: 'json',
            type: 'POST',                
            success: function (Data) {....}
});

আমি কেন আমার আজাক্স ক্যালাসকে সিঙ্ক্রোনাস করতে চাই !?
র‌দকো দিনভ

contentType: 'application/json', data: JSONObject,- সার্ভারটি JSON এর প্রত্যাশা করছে না, সুতরাং JSON প্রেরণ করার অর্থ হবে না। এছাড়াও JSON অবজেক্টের মতো কোনও জিনিস নেই
কোয়ান্টিন

4
headers: { 'Access-Control-Allow-Origin': '*' }, //add this line- কখনই না। Access-Control-Allow-Originএকটি প্রতিক্রিয়া শিরোনাম, একটি অনুরোধ শিরোনাম নয়। সর্বোপরি এটি কিছুই করবে না। সবচেয়ে খারাপ সময়ে এটি অনুরোধটিকে একটি সরল অনুরোধ থেকে প্রিফ্লাইটেড অনুরোধে রূপান্তরিত করবে যা সার্ভারের সাথে ডিল করা এত কঠিন করে তোলে।
কোয়ান্টিন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.