发展与真正的服务器API Angular2应用(Develop Angular2 Applicati

2019-09-29 19:15发布

我有REST API的一个真正的服务器准备就绪。 现在我正在开发一个angular2 Web应用程序,并且希望在Web应用程序的开发阶段到实际消耗的REST API。

我使用的角CLI。

我的服务器不支持跨起源的访问,所以我不能直接访问服务器的REST API。

我需要一些方法来把一个请求/响应处理程序,我的WebPack开发服务器。

这可能是一个愚蠢的问题,因为我想世界上的NodeJS第一次。

Answer 1:

你应该用“CORS”库允许跨原产地在你的服务器

链接: https://www.npmjs.com/package/cors

海平面和-S高于$一个Cors

心中无功=需要(“心脏”);

如果您使用的表达,例如,你应该叫“用”与CORS功能:

app.use(空气());

亚伊尔



Answer 2:

根据建议,我写了一个代理HTTP处理程序启用了CORS。 这将简单地采取从应用程序和委托到实际服务器的请求。 从实际的服务器响应将被送回给请求的Web应用程序。 从Web应用程序只需更改服务器的基本URL发送请求。 例如。 而不是http://your_real_server.com/dashboard使用的http://本地主机:7000 /仪表板

var http = require('http');
var url = require('url');
var querystring = require('querystring');

///////////////////////////////////////////////////////////////
var remoteUrl = 'your_remote_server_base_url_without_http.com';
///////////////////////////////////////////////////////////////

http.createServer(function (request, response) {

    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");

    pathName = url.parse(request.url).pathname;
    query = url.parse(request.url).query;

    if (query != null) {
        pathName += '?' + query;
    }

    console.log('Remote URL : ' + remoteUrl + pathName);

    var options = {
        host: remoteUrl,
        path: pathName,
        method: request.method
    };

    http.request(options, function (res) {
        res.setEncoding('utf8');
        var str = '';

        res.on('data', function (chunk) {
            str += chunk;
        });

        res.on('end', function () {
            response.writeHead(200, { 'Content-type': 'text/json' });
            response.write(str);
            response.end();
        });
    }).end();


}).listen(7000, function () {
    console.log('\n=============================================================');
    console.log('================== Running at port 7000 ======================');
    console.log('=============================================================\n');
});


文章来源: Develop Angular2 Application with real server APIs