使用真实服务器API开发Angular2应用程序

Question

我有一个真正的服务器与REST API准备就绪。现在，我正在开发一个angular2 web应用程序，并希望在web应用程序的开发阶段使用真正的REST API。

我使用的是angular-cli。

我的服务器不支持跨域访问，所以无法直接访问服务端REST api。

我需要一些方法来为我的webpack开发服务器放置一个请求/响应处理程序。

这可能是一个愚蠢的问题，因为我是第一次尝试nodejs world。

Answer 1

您应该使用'cors‘库在您的服务器中允许跨域

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

$ npm i -S cors

var cors =请求(‘cors’)；

例如，如果你使用express，你应该用cors调用' use‘函数：

app.use(cors())；

Yair

Answer 2

根据建议，我编写了一个启用了CORS的代理http处理程序。这将简单地从应用程序获取请求并将其委托给实际的服务器。来自实际服务器的响应将被发送回请求web应用程序。在web应用程序中，只需更改服务器的基本URL即可发送请求。例如：使用代替

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');
});