猿问

AngularJS $ http,CORS和http认证

因为在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'

        }

    });

答案:服务器设置。您必须提供:


/**

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

}

我的博客上有一篇有关此问题的文章,可以在这里看到。


手掌心
浏览 534回答 2
2回答

慕娘9325324

不,您不必放置凭据,您必须在客户端放置标头,例如:&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; }});

元芳怎么了

为了发出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"
随时随地看视频慕课网APP

相关分类

AngularJS
我要回答