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;});第二：必须在请求中指定withCredentials：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'        }    });答案：服务器设置。您必须提供：/** *  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");对于每个请求。收到OPTION时，您必须通过：/** *  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();}我的博客上有一篇有关此问题的文章，可以在这里看到。

Answer 1

不，您不必放置凭据，您必须在客户端放置标头，例如：

 $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();

    }

});

Answer 2

为了发出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"