কৌণিক.জেএস ব্যবহার করে HTTP অনুরোধে একটি কাস্টম শিরোনাম যুক্ত করা হচ্ছে


89

আমি কৌণিক.জেএস এর জন্য একজন নবজাতক এবং আমি একটি অনুরোধে কিছু শিরোনাম যুক্ত করার চেষ্টা করছি:

   var config = {headers: {
            'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
            'Accept': 'application/json;odata=verbose'
        }
    };

   $http.get('https://www.example.com/ApplicationData.svc/Malls(1)/Retailers', config).success(successCallback).error(errorCallback);

আমি সমস্ত ডকুমেন্টেশন দেখেছি এবং এটি আমার কাছে মনে হচ্ছে এটি সঠিক হওয়া উচিত।

আমি যখন URL এর জন্য একটি স্থানীয় ফাইল ব্যবহার করি, তখন আমি $http.getChrome এ নেটওয়ার্ক ট্যাবে নিম্নলিখিত HTTP অনুরোধটি দেখতে পাই:

GET /app/data/offers.json HTTP/1.1
Host: www.example.com
Connection: keep-alive
Cache-Control: max-age=0
If-None-Match: "0f0abc9026855b5938797878a03e6889"
Authorization: Basic Y2hhZHN0b25lbWFuOkNoYW5nZV9tZQ==
Accept: application/json;odata=verbose
X-Requested-With: XMLHttpRequest
If-Modified-Since: Sun, 24 Mar 2013 15:58:55 GMT
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
X-Testing: Testing
Referer: http://www.example.com/app/index.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

আপনি দেখতে পাচ্ছেন, উভয় শিরোনামই সঠিকভাবে যুক্ত হয়েছিল। তবে আমি যখন $http.getউপরে বর্ণিত একটিতে URL টি পরিবর্তন করি (প্রকৃত ঠিকানা ব্যবহার করা ছাড়া, উদাহরণ.কম) না, তখন আমি পাই:

OPTIONS /ApplicationData.svc/Malls(1) HTTP/1.1
Host: www.datahost.net
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://mpon.site44.com
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
Access-Control-Request-Headers: accept, origin, x-requested-with, authorization, x-testing
Accept: */*
Referer: http://mpon.site44.com/app/index.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

এই দুটির মধ্যে কোডের মধ্যে কেবলমাত্র পার্থক্য হ'ল প্রথম URL টি একটি স্থানীয় ফাইল এবং দ্বিতীয়টির জন্য URL টি একটি দূরবর্তী সার্ভার। আপনি যদি দ্বিতীয় অনুরোধ শিরোনামের দিকে তাকান তবে কোনও প্রমাণীকরণ শিরোনাম নেই এবং উপস্থিতগুলি Acceptনির্দিষ্ট বর্ণিত পরিবর্তে একটি ডিফল্ট ব্যবহার করছে বলে মনে হয়। এছাড়াও, প্রথম লাইনটি এখন (যদিও এটি ) এর OPTIONSপরিবর্তে বলে ।GETAccess-Control-Request-MethodGET

উপরের কোডটিতে কী সমস্যা আছে বা কোনও ডেটা উত্স হিসাবে স্থানীয় ফাইল ব্যবহার না করার সময় অতিরিক্ত শিরোনামকে কীভাবে অন্তর্ভুক্ত করা যায় সে সম্পর্কে কোনও ধারণা?


4
এটি একটি সিওআরএস ইস্যুর মতো দেখায় - কিছু আলোচনার জন্য এই আলোচনার মাধ্যমে একটি পঠন গ্রহণ করুন: groups.google.com/forum/#!topic/angular/CSBMY6oXfqs
কেভিন হাকানসন

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

4
যদি অনুরোধ ক্রস ডোমেন হয় তবে ক্রোম সিওআরএস শিরোলেখগুলির সন্ধানের জন্য অনুরোধের পূর্বে আলোকপাত করছে। আমার উত্তর পরীক্ষা করে দেখুন।
অসীম কেটি

উত্তর:


66

আপনার যা ছিল তা আমি নিয়েছিলাম এবং অন্য একটি X-Testingশিরোনাম যুক্ত করেছি

var config = {headers:  {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose',
        "X-Testing" : "testing"
    }
};

$http.get("/test", config);

এবং ক্রোম নেটওয়ার্ক ট্যাবে, আমি সেগুলি প্রেরণ করা দেখতে পাচ্ছি।

GET /test HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Accept: application/json;odata=verbose
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
Authorization: Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==
X-Testing: testing
Referer: http://localhost:3000/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

আপনি কি তাদের ব্রাউজার থেকে দেখছেন না, বা সার্ভারে? ব্রাউজার টুলিং বা একটি ডিবাগ প্রক্সি চেষ্টা করে দেখুন এবং কী পাঠানো হচ্ছে তা দেখুন।


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

দুঃখিত, আমি আপনার উত্তরে একটি সম্পাদনা যুক্ত করেছি যা আমার আসল প্রশ্নে যেতে চেয়েছিল।
ট্রেন্টক্লুয়েটার

আমার অর্থ বিকাশকারী সরঞ্জামগুলির নেটওয়ার্ক ট্যাব ছিল, সংস্থানগুলি নয় - আপডেটের উত্তর
কেভিন হাকানসন

আমি প্রশ্নের আরও তথ্য যুক্ত। দেখে মনে হচ্ছে শিরোনামগুলি একটি ক্ষেত্রে যুক্ত হয়েছে তবে অন্যটি নয়।
ট্রেন্টক্লুয়েটার

21

HTTP পোষ্ট পদ্ধতি ব্যবহার করে বেসিক প্রমাণীকরণ:

$http({
    method: 'POST',
    url: '/API/authenticate',
    data: 'username=' + username + '&password=' + password + '&email=' + email,
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Login-Ajax-call": 'true'
    }
}).then(function(response) {
    if (response.data == 'ok') {
        // success
    } else {
        // failed
    }
});

... এবং শিরোনাম সহ জিইটি পদ্ধতি কল:

$http({
    method: 'GET',
    url: '/books',
    headers: {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json',
        "X-Login-Ajax-call": 'true'
    }
}).then(function(response) {
    if (response.data == 'ok') {
        // success
    } else {
        // failed
    }
});

সেরা উত্তর।
ইয়োদা

9

আপনি যদি সমস্ত কাস্টম শিরোনাম সমস্ত অনুরোধে যুক্ত করতে চান, আপনি সর্বদা এই শিরোলেখ যুক্ত করতে $ httpProvider এ ডিফল্ট পরিবর্তন করতে পারেন…

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common = { 
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose'
      };
}]);

সব কিন্তু বিকল্প অনুরোধ যে
রোকো

সুন্দর উদাহরণ। এই পৃষ্ঠাগুলি পুনঃনির্দেশের জন্য টোকেন ক্যাশে ব্যবহার করা যেতে পারে?
মার্টিয়ান2049

7

আমার পরামর্শ হ'ল ফাংশনের ভিতরে এই জাতীয় ফাংশন কল সেটিংস যুক্ত করা হবে যা এটির জন্য উপযুক্ত check আমি নিশ্চিত এটি কার্যকরভাবে কাজ করবে। এটা আমার জন্য নিখুঁতভাবে কাজ করছে।

function getSettings(requestData) {
    return {
        url: requestData.url,
        dataType: requestData.dataType || "json",
        data: requestData.data || {},
        headers: requestData.headers || {
            "accept": "application/json; charset=utf-8",
            'Authorization': 'Bearer ' + requestData.token
        },
        async: requestData.async || "false",
        cache: requestData.cache || "false",
        success: requestData.success || {},
        error: requestData.error || {},
        complete: requestData.complete || {},
        fail: requestData.fail || {}
    };
}

তারপরে আপনার ডেটাটিকে এভাবে কল করুন

    var requestData = {
        url: 'API end point',
        data: Your Request Data,
        token: Your Token
    };

    var settings = getSettings(requestData);
    settings.method = "POST"; //("Your request type")
    return $http(settings);

2

আপনি বিকল্পগুলির অনুরোধের জন্য যা দেখছেন তা ঠিক আছে। অনুমোদনের শিরোনাম এতে প্রকাশিত হয় না।

কিন্তু কাজ বুনিয়াদি প্রমাণীকরণ জন্য অনুক্রমে আপনি যোগ করতে প্রয়োজন: withCredentials = true;আপনারvar config

AngularJS $ HT ডকুমেন্টেশন থেকে :

withCredentials - {boolean}- withCredentials XHR অবজেক্টে পতাকা সেট করা হবে কিনা । আরও তথ্যের জন্য শংসাপত্রগুলির সাথে অনুরোধগুলি দেখুন ।


1

এবং সার্ভার থেকে উত্তর কি? এটিতে একটি 204 এর উত্তর দেওয়া উচিত এবং তারপরে আপনি যে জিইটি অনুরোধ করছেন তা সত্যই প্রেরণ করবে।

বিকল্পগুলিতে ক্লায়েন্ট সার্ভারের সিওআরএস অনুরোধের অনুমতি দেয় কিনা তা পরীক্ষা করে দেখছে। যদি এটি আপনাকে একটি 204 এর চেয়ে আলাদা কিছু দেয় তবে সঠিক অনুমতি দিন-উত্স শিরোনাম প্রেরণের জন্য আপনার সার্ভারটি কনফিগার করা উচিত।

আপনি যেভাবে শিরোনাম যুক্ত করছেন তা করার সঠিক উপায়।


1

ক্রোম সিওআরএস শিরোলেখগুলির সন্ধানের জন্য অনুরোধটি পূর্বনির্ধারিত করছে। যদি অনুরোধটি গ্রহণযোগ্য হয় তবে এটি আসল অনুরোধটি প্রেরণ করবে। যদি আপনি এই ক্রস-ডোমেনটি করে থাকেন তবে আপনাকে কেবল এটির মোকাবিলা করতে হবে অথবা অন্যথায় অনুরোধটি ক্রস-ডোমেনকে নন-ক্রস করার কোনও উপায় খুঁজে বের করতে হবে। এটি নকশা দ্বারা।

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

এটি জিইটি, হেড বা পোষ্ট ব্যতীত অন্য পদ্ধতি ব্যবহার করে। এছাড়াও, যদি POST অ্যাপ্লিকেশন / x-www-form-urlencoded, মাল্টিপার্ট / ফর্ম-ডেটা, বা পাঠ্য / প্লেইন ব্যতীত কোনও সামগ্রী-প্রকারের সাথে অনুরোধ ডেটা প্রেরণ করতে ব্যবহৃত হয়, যেমন যদি POST অনুরোধটি সার্ভারে একটি এক্সএমএল পেলোড প্রেরণ করে অ্যাপ্লিকেশন / এক্সএমএল বা পাঠ্য / এক্সএমএল ব্যবহার করে, তারপরে অনুরোধটি পূর্বনির্ধারিত। এটি অনুরোধে কাস্টম শিরোলেখ সেট করে (উদাহরণস্বরূপ অনুরোধটি শিরোনাম যেমন এক্স-পিনোগোথার ব্যবহার করে)

রেফ: জিমে / পোষ্ট / পুট / ডিলিটের পরিবর্তে ক্রোমে অ্যাজ্যাক্স অপশন পাঠাচ্ছে?


0

আপনি কেবল একটি শিরোনাম যুক্ত করছেন যা কোন সার্ভার মঞ্জুরি দেয় না।

উদাহরণস্বরূপ - আপনার সার্ভারটি কেবলমাত্র এই শিরোলেখগুলিকে অনুমতি দেওয়ার জন্য CORS সেট আপ করেছে (গ্রহণ করুন, ক্যাশে-নিয়ন্ত্রণ, প্রাগমা, বিষয়বস্তুর ধরণ, উত্স)

এবং আপনার HTTP অনুরোধে আপনি এটি যুক্ত করছেন

 headers: {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json',
        'x-testing': 'testingValue'
    }

তারপরে সার্ভার এই অনুরোধটিকে প্রত্যাখ্যান করবে যেহেতু (অনুমোদন এবং এক্স-টেস্টিং) অনুমোদিত নয়।

এটি সার্ভার সাইড কনফিগারেশন।

এবং এইচটিটিপি বিকল্পগুলির সাথে কিছুই করার নেই, এটি সার্ভারের কাছে একটি প্রিফলাইট যা বিভিন্ন ডোমেন থেকে আসা সার্ভারটি প্রকৃত কলকে অনুমতি দেয় কিনা তা পরীক্ষা করা।


-8

আমার জন্য নিম্নলিখিত বর্ণনামূলক স্নিপেট কাজ করেছে। সম্ভবত আপনি 'শিরোনাম নাম ব্যবহার করা উচিত নয় ?

{
   headers: { 
      Authorization: "Basic " + getAuthDigest(), 
      Accept: "text/plain" 
   }
}

আমি ব্যবহার করছি $http.ajax(), যদিও আমি গেম চেঞ্জার হওয়ার আশা করি না।

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