[angularjs] AngularJS $ http, CORS 및 http 인증

Program / 글쓴이

AngularJS와 함께 CORS 및 http 인증을 사용하는 것은 까다로울 수 있으므로 학습 한 교훈을 공유하기 위해 질문을 편집했습니다. 먼저 igorzg에게 감사드립니다. 그의 대답은 저에게 많은 도움이되었습니다. 시나리오는 다음과 같습니다. AngularJS $ http 서비스를 사용하여 다른 도메인에 POST 요청을 보내려고합니다. 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'
        }
    });

Тhird : 서버 설정. 다음을 제공해야합니다.

/**
 *  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 요청을하려면 Apache에서 mode_header가 활성화되어 있는지 확인하는 데 필요한 것과 함께 요청에 헤더를 추가해야합니다.

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"

답변