来自Node-Express应用程序的身份验证和跨域错误

时间:2013-11-25 12:38:10

标签: node.js ember.js express node-http-proxy

我正在使用运行在节点上的ember.js开发一个应用程序。

现在,我必须调用一些外部Web服务并相应地构建我的主页(基于webservice响应)。

  • 这些Web服务正在某些外部服务器(不同的域)中运行。目前我正在从本地环境运行我的网站。
  • 身份验证:只有在提供有效凭据后,用户才能访问这些网络服务。也就是说,如果我尝试从浏览器访问此Web服务,首先它会要求提供用户名和密码。如果这些凭据有效(服务器端验证),它将返回响应json。

我的 app.js 代码如下:

var express = require('express');
var routes = require('./routes');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
    app.use(express.errorHandler());
}

app.get('/', routes.index);

http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port ' + app.get('port'));
});

主页代码(为简单起见,我删除了所有视图,只是在页面加载时调用我的外部Web服务)

<html>
<head>
    <title>Lets think..</title>
    <script src="./javascripts/libs/handlebars-1.0.0.js"></script>
    <script src="./javascripts/libs/jquery-1.9.1.js"></script>
    <script src="./javascripts/libs/ember-1.1.2.js"></script>
    <script>
        window.App = Ember.Application.create();
    </script>

    <script>
        $(window).load(function(){
            $.ajax({
                type: 'GET',
                url: 'http://vpn.domain_name.com/myServer/WebService/json/getInfo',
                data: {username: "user_name",password: "my_password"},
                success: function (data) {
                    console.log('sucess');
                },
                failure: function(error){
                    console.log('error');
                }
            });
        });
    </script>
</head>
<body>

</body>
</html>

如上所述,我能够从浏览器成功访问以下Web服务(http://vpn.domain_name.com/myServer/WebService/json/getInfo)(在凭据验证后)。

但是,当我尝试通过代码访问它时,我正在检索以下错误: 在通过firebug进行调试

"NetworkError: 401 Unauthorized - http://vpn.domain_name.com/myServer/WebService/json/getInfo?username=user_name&password=my_password"

通过谷歌Chrome控制台进行调试

XMLHttpRequest cannot load http://vpn.domain_name.com/myServer/WebService/json/getInfo?username=user_name&password=my_password. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我不确定上述错误是由于跨域访问还是http基本身份验证错误。

我尝试使用How to allow CORS?http://nthloop.com/blog/local-dev-with-nodejs-proxy/

中建议的解决方案

但是,我无法从我的代码中检索到正确的响应。任何人都可以指导我这个。

谢谢。

2 个答案:

答案 0 :(得分:1)

(更多回答the comment,而非实际问题)

如果您想使用$.ajax传递登录凭据以进行基本身份验证:

$.ajax({
  type      : 'GET',
  url       : 'http://vpn.domain_name.com/myServer/WebService/json/getInfo',
  username  : 'user_name',
  password  : 'my_password',
  success   : function (data) {
    console.log('success');
  },
  failure   : function(error){
    console.log('error');
  }
});

(而不是将usernamepassword作为带data的网址参数传递。)

答案 1 :(得分:1)

我最初使用的是JSONP,因为它实际上是克服XMLHttpRequest相同域策略的一个简单技巧。但是,我访问的web服务引发了几个JSONP数据类型的问题(基本的http athentication首次失败,响应引发了一个奇怪的错误 SyntaxError:missing; before statement )。由于我无法控制使用JSONP的Web服务,因此考虑删除JSONP选项并继续使用 http-proxy 方法处理跨域问题。

在客户端代码中进行了以下更改,现在我能够成功访问Web服务。

(1)已安装 http-proxy npm

(2)在 app.js

中添加了以下行
var httpProxy = require('http-proxy');

var endpoint  = {
    host:   'IP_ADDRESS_OR_DOMAIN_NAME', //of webservice
    port:   80, 
    prefix: '/myServer/WebService/json'  //all my webservices are accessed through this path
}

app.use(function(req, res) {
    if (req.url.indexOf(endpoint.prefix) === 0) {
        proxy.proxyRequest(req, res, endpoint);
    }
});

(3)我的ajax电话会是:

$(window).load(function(){
            $.ajax({
                type: 'GET',
                url: '/myServer/WebService/json/getInfo',
                username: "user_name",
                password: "password",
                success: function (data) {
                    console.log('sucess');
                    console.log(data);
                },
                failure: function(error){
                    console.log('error');
                }
            });
        });

此处:/ getInfo是webservice(具有基本的http身份验证)。

希望这有帮助!

感谢。