AngularJS $ http, CORS และการพิสูจน์ตัวตน http

เนื่องจากการใช้ CORS และการพิสูจน์ตัวตน http กับ AngularJS อาจเป็นเรื่องยุ่งยากฉันจึงแก้ไขคำถามเพื่อแบ่งปันบทเรียนที่ได้เรียนรู้ ก่อนอื่นฉันต้องขอบคุณ igorzg คำตอบของเขาช่วยฉันได้มาก สถานการณ์ดังต่อไปนี้: คุณต้องการส่งคำขอ POST ไปยังโดเมนอื่นด้วยบริการ AngularJS $ http มีหลายสิ่งที่ยุ่งยากที่ต้องระวังเมื่อรับ AngularJS และการตั้งค่าเซิร์ฟเวอร์

ขั้นแรก: ในการกำหนดค่าแอปพลิเคชันของคุณคุณต้องอนุญาตการโทรข้ามโดเมน

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

ประการที่สอง: คุณต้องระบุ withCredentials: true และชื่อผู้ใช้และรหัสผ่านในการร้องขอ

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

ประการที่สาม: การตั้งค่าเซิร์ฟเวอร์ คุณต้องให้:

/**
 *  Cors usage example. 
 *  @author Georgi Naumov
 *  gonaumov@gmail.com 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");

สำหรับทุกคำขอ เมื่อคุณได้รับ OPTION คุณต้องผ่าน:

/**
 *  Cors usage example. 
 *  @author Georgi Naumov
 *  gonaumov@gmail.com 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
 *  gonaumov@gmail.com 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();
}
?>

มีบทความในบล็อกของฉันเกี่ยวกับปัญหานี้ซึ่งสามารถมองเห็นเป็นที่นี่

ไม่คุณไม่ต้องใส่ข้อมูลรับรองคุณต้องใส่ส่วนหัวที่ฝั่งไคลเอ็นต์เช่น:

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

และและที่ฝั่งเซิร์ฟเวอร์คุณต้องใส่ส่วนหัวนี้เป็นตัวอย่างสำหรับ nodejs:

/**
 * 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();
    }


});

สำหรับการสร้างคำขอ CORS ต้องเพิ่มส่วนหัวในคำขอพร้อมกับสิ่งเดียวกันที่เขาต้องการตรวจสอบว่า mode_header เปิดใช้งานใน Apache

สำหรับการเปิดใช้งานส่วนหัวใน Ubuntu:

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"