javascript - 带有用户名密码的 Angularjs Rest 端点

Question

我正在尝试编写一个基于 AngularJS 的单页应用程序(SPA)。该应用程序应连接到提供 RestFul 服务的网络服务器，但每个端点都需要用户名和密码以及其他参数。由于我是该领域的初学者，因此在进行实际开发之前，我尝试了 PostMan/Advanced Rest Client chrome 扩展来验证基本连接。示例请求预览:

POST /servicesNS/admin/search/search/jobs/export HTTP/1.1
Host: localhost:8089
Cache-Control: no-cache
Content-Type: application/x-www-form-urlencoded

search=search+error+|+table+host&output_data=xml&username=admin&password=unity3d

这实际上相当于 cURL 命令:

curl  -k -u admin:unity3d --data-urlencode search="search error | table host" -d "output_mode=xml" https://localhost:8089/servicesNS/admin/search/search/jobs/result

在以上述方式获得成功结果后，我现在正在寻找在 AngularJS 中实现这一点的等效方法。

var app = angular.module('TabsApp', []);
app.controller('TabsCtrl', function ($scope, $http)
{
    login = function () {

        $scope.userName ="admin";
        $scope.password ="unity3d"

        $http({
            method :"POST",
            url:"https://localhost:8089/servicesNS/admin/search/search/jobs/export",
            data: { "username" :  "admin" , "password": "unity3d", "search" : "search error"},
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}

        }).success(function (data, status, headers, config) {
            console.log('status',status);
            console.log('data',status);
            console.log('headers',status);
        });
    }
});

这给了我错误 401 Unauthorized，响应的 header :

> Remote Address:127.0.0.1:8089 Request
> URL:https://localhost:8089/servicesNS/admin/search/search/jobs/export
> Request Method:POST Status Code:401 Unauthorized Request Headersview
> source Accept:application/json, text/plain, */* Accept-Encoding:gzip,
> deflate Accept-Language:en-US,en;q=0.8 Connection:keep-alive
> Content-Length:65 Content-Type:application/x-www-form-urlencoded
> Host:localhost:8089 Origin:http://localhost:63342
> Referer:http://localhost:63342/UI/UI1.html User-Agent:Mozilla/5.0
> (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
> Chrome/39.0.2171.71 Safari/537.36 Form Dataview sourceview URL encoded
> {"username":"admin","password":"unity3d","search":"search error"}:
> Response Headersview source Access-Control-Allow-Credentials:true
> Access-Control-Allow-Headers:Authorization
> Access-Control-Allow-Methods:GET,POST,PUT,DELETE,HEAD,OPTIONS
> Access-Control-Allow-Origin:* Cache-Control:private
> Connection:Keep-Alive Content-Length:130 Content-Type:text/xml;
> charset=UTF-8 Date:Sat, 29 Nov 2014 19:53:59 GMT Server:Splunkd
> Vary:Cookie, Authorization WWW-Authenticate:Basic realm="/splunk"
> X-Content-Type-Options:nosniff X-Frame-Options:SAMEORIGIN

输出是:

<?xml version="1.0" encoding="UTF-8"?> <response>   <messages>
    <msg type="ERROR">Unauthorized</msg>   </messages> </response>

知道出了什么问题吗？

Answer 1

如果您以'application/x-www-form-urlencoded'格式发送响应，则实际数据格式应该相同。

您当前发送的是一个 JSON 对象。您需要使用 $http tranformer 来转换请求:Something in line of

            transformRequest: function (data) {
                var postData = [];
                for (var prop in data)
                postData.push(encodeURIComponent(prop) + "=" + encodeURIComponent(data[prop]));
                return postData.join("&");
            },

在这里查看工作 fiddle http://jsfiddle.net/cmyworld/doLhmgL6/