AngularJS $ http, CORS और http प्रमाणीकरण

Question

क्योंकि AngularJS के साथ CORS और http प्रमाणीकरण का उपयोग करना मुश्किल हो सकता है, मैंने एक सीखा सबक साझा करने के लिए प्रश्न को संपादित किया। पहले मैं igorzg को धन्यवाद देना चाहता हूं। उनके जवाब से मुझे बहुत मदद मिली। परिदृश्य निम्न है: आप AngularJS $ http सेवा के साथ एक अलग डोमेन में POST अनुरोध भेजना चाहते हैं। AngularJS और सर्वर सेटअप प्राप्त करते समय बहुत सी मुश्किल बातों का ध्यान रखना चाहिए।

पहला: आपके एप्लिकेशन कॉन्फ़िगरेशन में आपको क्रॉस डोमेन कॉल की अनुमति देनी चाहिए

/**
 *  Cors usage example. 
 *  @author Georgi Naumov
 *  [e-mail] for contacts and 
 *  suggestions. 
 **/ 
app.config(function($httpProvider) {
    //Enable cross domain calls
    $httpProvider.defaults.useXDomain = true;
});

दूसरा: आपको आवश्यक शर्तें निर्दिष्ट करनी चाहिए: अनुरोध में सही और उपयोगकर्ता नाम और पासवर्ड।

 /**
  *  Cors usage example. 
  *  @author Georgi Naumov
  *  [e-mail] for contacts and 
  *  suggestions. 
  **/ 
   $http({
        url: 'url of remote service',
        method: "POST",
        data: JSON.stringify(requestData),
        withCredentials: true,
        headers: {
            'Authorization': 'Basic bashe64usename:password'
        }
    });

Тhird: सर्वर सेटअप। आपको प्रदान करना होगा:

/**
 *  Cors usage example. 
 *  @author Georgi Naumov
 *  [e-mail] for contacts and 
 *  suggestions. 
 **/ 
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://url.com:8080");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

हर अनुरोध के लिए। जब आप विकल्प प्राप्त करते हैं तो आपको पास होना चाहिए:

/**
 *  Cors usage example. 
 *  @author Georgi Naumov
 *  [e-mail] for contacts and 
 *  suggestions. 
 **/ 
if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
   header( "HTTP/1.1 200 OK" );
   exit();
}

HTTP प्रमाणीकरण और बाकी सब उसके बाद आता है।

यहाँ php के साथ सर्वर साइड के उपयोग का पूरा उदाहरण है।

<?php
/**
 *  Cors usage example. 
 *  @author Georgi Naumov
 *  [e-mail] for contacts and 
 *  suggestions. 
 **/ 
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://url:8080");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
   header( "HTTP/1.1 200 OK" );
   exit();
}


$realm = 'Restricted area';

$password = 'somepassword';

$users = array('someusername' => $password);


if (isset($_SERVER['PHP_AUTH_USER']) == false ||  isset($_SERVER['PHP_AUTH_PW']) == false) {
    header('WWW-Authenticate: Basic realm="My Realm"');

    die('Not authorised');
}

if (isset($users[$_SERVER['PHP_AUTH_USER']]) && $users[$_SERVER['PHP_AUTH_USER']] == $password) 
{
    header( "HTTP/1.1 200 OK" );
    echo 'You are logged in!' ;
    exit();
}
?>

इस मुद्दे के बारे में मेरे ब्लॉग पर एक लेख है जिसे यहाँ देखा जा सकता है ।

Comments

प्रश्न संपादित किया जाता है।

— जॉर्जी नौमोव

मैं थोड़ा उलझन में हूँ, यह कोणीय है, लेकिन आप इसे PHP टैग्स में लपेटते हैं .... क्या मुझे कुछ याद आया?

— onaclov2000

यह सर्वर साइड लॉजिक का एक उदाहरण है। "Тhird: सर्वर सेटअप" के नीचे का पाठ सर्वर साइड लॉजिक है।

— जॉर्जी नौमोव

ग्राहक पक्ष के लिए @ onaclov2000 AngularJS है। यह किसी भी सर्वर साइड, PHP, Ruby, Perl, Python, Java, JavaScript से बात कर सकता है ... मैं जा सकता था ..

— Eric Hodonsky

क्या यह एक सवाल है? यह एक अच्छे उत्तर की तरह है :)

— मोहम्मद करमानी

Answer 1

नहीं, आपको क्रेडेंशियल डालने की आवश्यकता नहीं है, आपको क्लाइंट साइड पर हेडर लगाना होगा जैसे:

 $http({
        url: 'url of service',
        method: "POST",
        data: {test :  name },
        withCredentials: true,
        headers: {
                    'Content-Type': 'application/json; charset=utf-8'
        }
    });

और सर्वर साइड पर आपको हेडर लगाना होगा, यह नोडज के लिए उदाहरण है:

/**
 * On all requests add headers
 */
app.all('*', function(req, res,next) {


    /**
     * Response settings
     * @type {Object}
     */
    var responseSettings = {
        "AccessControlAllowOrigin": req.headers.origin,
        "AccessControlAllowHeaders": "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name",
        "AccessControlAllowMethods": "POST, GET, PUT, DELETE, OPTIONS",
        "AccessControlAllowCredentials": true
    };

    /**
     * Headers
     */
    res.header("Access-Control-Allow-Credentials", responseSettings.AccessControlAllowCredentials);
    res.header("Access-Control-Allow-Origin",  responseSettings.AccessControlAllowOrigin);
    res.header("Access-Control-Allow-Headers", (req.headers['access-control-request-headers']) ? req.headers['access-control-request-headers'] : "x-requested-with");
    res.header("Access-Control-Allow-Methods", (req.headers['access-control-request-method']) ? req.headers['access-control-request-method'] : responseSettings.AccessControlAllowMethods);

    if ('OPTIONS' == req.method) {
        res.send(200);
    }
    else {
        next();
    }


});

Comments

सामान्य रूप से कोर के साथ, क्या सर्वर को सभी हेडर (सामग्री, सामग्री-लंबाई, संदर्भ, आदि ...) को वास्तविक, यानी गैर-विकल्प, अनुरोध में मौजूद होने की अनुमति है?

— केविन मेरेडिथ

@KevinMeredith नहीं, आपको सभी हेडर की अनुमति देने की आवश्यकता नहीं है, आप केवल उसी चीज़ की अनुमति दे सकते हैं जिसकी आपको आवश्यकता है और आप इसे एक डोमेन तक भी सीमित कर सकते हैं।

— igorzg

मुझे कैसे पता चलेगा कि मुझे क्या चाहिए?

— केविन मेरेडिथ

आपके अच्छे उत्तर के लिए धन्यवाद :)

— कमरुज्जमाँ

मैं उलझन में हूं, अगर मुझे http मूल प्रमाणीकरण द्वारा सुरक्षित किया गया है, तो मुझे समापन बिंदु के साथ प्रमाणित करने की आवश्यकता क्यों नहीं है?

— मैक्सिम जुबेरव

Answer 2

एक CORS अनुरोध करने के लिए किसी को हेडर को अनुरोध के साथ जोड़ना होगा, साथ ही उसे Apache में mode_header की जांच करनी होगी।

उबंटू में हेडर सक्षम करने के लिए:

sudo a2enmod headers

Php सर्वर के लिए विभिन्न मूल उपयोग से अनुरोध स्वीकार करने के लिए:

Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"