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

不，您不必放置凭据，您必须在客户端放置标头，例如：&nbsp;$http({&nbsp; &nbsp; &nbsp; &nbsp; url: 'url of service',&nbsp; &nbsp; &nbsp; &nbsp; method: "POST",&nbsp; &nbsp; &nbsp; &nbsp; data: {test :&nbsp; name },&nbsp; &nbsp; &nbsp; &nbsp; withCredentials: true,&nbsp; &nbsp; &nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Content-Type': 'application/json; charset=utf-8'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });并且在服务器端，您必须在此放置标头，这是nodejs的示例：/**&nbsp;* On all requests add headers&nbsp;*/app.all('*', function(req, res,next) {&nbsp; &nbsp; /**&nbsp; &nbsp; &nbsp;* Response settings&nbsp; &nbsp; &nbsp;* @type {Object}&nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; var responseSettings = {&nbsp; &nbsp; &nbsp; &nbsp; "AccessControlAllowOrigin": req.headers.origin,&nbsp; &nbsp; &nbsp; &nbsp; "AccessControlAllowHeaders": "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,&nbsp; Date, X-Api-Version, X-File-Name",&nbsp; &nbsp; &nbsp; &nbsp; "AccessControlAllowMethods": "POST, GET, PUT, DELETE, OPTIONS",&nbsp; &nbsp; &nbsp; &nbsp; "AccessControlAllowCredentials": true&nbsp; &nbsp; };&nbsp; &nbsp; /**&nbsp; &nbsp; &nbsp;* Headers&nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; res.header("Access-Control-Allow-Credentials", responseSettings.AccessControlAllowCredentials);&nbsp; &nbsp; res.header("Access-Control-Allow-Origin",&nbsp; responseSettings.AccessControlAllowOrigin);&nbsp; &nbsp; res.header("Access-Control-Allow-Headers", (req.headers['access-control-request-headers']) ? req.headers['access-control-request-headers'] : "x-requested-with");&nbsp; &nbsp; res.header("Access-Control-Allow-Methods", (req.headers['access-control-request-method']) ? req.headers['access-control-request-method'] : responseSettings.AccessControlAllowMethods);&nbsp; &nbsp; if ('OPTIONS' == req.method) {&nbsp; &nbsp; &nbsp; &nbsp; res.send(200);&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; next();&nbsp; &nbsp; }});

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"