前端和后端的不同端口.如何提出要求? [英] Different ports for frontend and backend. How to make a request?

问题描述

使用Angular-CLI作为前端. 4200端口

使用Express作为后端. 8080端口

目录如下:

Application
 - backend
   - ...Express architecture
 - frontend
   -...Angular2 architecture

因此，我正在运行两个项目，两个指挥官，一个负责前沿，第二个负责后端. node app.js用于后端(8080)，ng serve用于前端(4200).

让我们假设我在后端有一个返回一些字符串的层.

app.get('/hello', function(req, res) {
  res.send("Hello!");
}

如何从前端向后端发出请求并获取该字符串?我不想知道我应该怎么使用Angular2，因为那不是重点.我在问，我应该使用什么技术才能在不同端口上连接这两个(前端和后端)侧.如果我只运行它们并从前端发出请求，则会收到一条错误消息，因为它找不到/hello网址.

解决方案

您对/hello的请求意味着在运行角度应用程序的应用程序内的绝对路径，因此该请求将转到http://localhost:4200/hello.您的角度应用程序只是不了解您要定位的快速应用程序.

绝对网址

如果要访问其他(快速)应用程序上的hello路由，则需要通过引用http://localhost:8080/hello来明确指定此路由.

cors

这样做，就可以确定正确的应用程序为目标，但是您可能会遇到CORS问题，因为浏览器将阻止从localhost:4200获取的javascript代码访问localhost:8080处的服务器.这是您浏览器的安全功能.因此，如果您想允许4200处的代码访问8080处的后端，则您的后端可以将这个所谓的原始服务器列入白名单.有关详细信息，请参见 http://enable-cors.org/以及可用于支持cors的相应的快速中间件.在您的后端中( https://www.npmjs.com/package/cors ).

在我看来，使用这种方法有两个缺点.首先，您需要一种方法来告诉您的前端可以通过哪个绝对URL到达后端.这必须是可配置的，因为您需要不同的URL来进行开发，登台和生产.然后，您还需要一种方法来管理所有列入白名单的URL，因为与运行开发中的前端时相比，生产中的前端将具有不同的URL.这可能会很麻烦.

代理您的后端

我认为，更好的方法是通过前端应用程序中的后端proxying在基础架构中处理此问题.通过代理，您基本上可以告诉前端服务器对某个URL的所有请求都应传递到另一个应用程序.在您的情况下，这可能意味着，例如，您为路径/api/配置代理以在localhost:8080上代理应用程序.然后，服务器不会尝试在前端应用程序中找到类似/api/hello的URL，而是将您的请求转发到localhost:8080/hello.然后，在您的角度应用程序中，您无需关心后端的URL，然后您就可以始终向/api/some-express-route之类的URL发出请求.

为此，您需要配置您的angular dev服务器以代理请求.有关如何执行此操作的详细信息，请参阅 https://github上的文档. com/angular/angular-cli#proxy-to-backend .投入生产时，您可以通过配置网络服务器来完成此操作，例如nginx代理请求.

Using Angular-CLI as a frontend. 4200 port

Using Express as a backend. 8080 port

Directories look like:

Application
 - backend
   - ...Express architecture
 - frontend
   -...Angular2 architecture

So I'm running two projects, two commanders, one for frontent, second one for backend. node app.js for backend (8080), ng serve for frontent (4200).

Let's assume that I have a layer in backend which returns some string.

app.get('/hello', function(req, res) {
  res.send("Hello!");
}

How can I make a request from frontend to backend and get that string? I don't want to know how exactly should I use Angular2 because that's not the point. I'm asking, what technology should I use to be able connect these two (frontent and backend) sides on different ports. If I just run them and make a request from frontend, I'll get an error because it can't find /hello url.

解决方案

Your request to /hello means an absolute path inside the application running the angular application, so the request goes to http://localhost:4200/hello. Your angular application just doesn't know about the express application you want to target.

absolute urls

If you want to access the hello route on the other (express) application, you need to explicitly specify this by referencing http://localhost:8080/hello.

cors

Doing it this way, the correct application is targeted, but you will likely run into CORS issues, because the browser will prevent the javascript code obtained from localhost:4200 to access a server at localhost:8080. This is a security feature of your browser. So if you want to allow the code at 4200 to access the backend at 8080 your backend can whitelist this so called origin. For details see http://enable-cors.org/ and a corresponding express middleware you could use to support cors in your backend (https://www.npmjs.com/package/cors).

Using this approach has two downsides in my opinion. First, you need a way to tell your frontend under which absolute url it can reach the backend. This must be configurable because you need different urls for dev, staging and production. You then also need a way to manage all your whitelisted urls because the frontend in production will have a different url than when running the frontend in development. This can get pretty cumbersome to handle.

proxying your backend

A better approach in my opinion is to handle this in your infrastructure by proxying the backend in your frontend application. With proxying you basically tell your frontend server that all requests to some url should be passed through to another application. In your case this could probably mean, that for example you configure a proxy for the path /api/ to proxy the application on localhost:8080. The server then doesn't try to find a url like /api/hello on your frontend application but forwards your request to localhost:8080/hello. In your angular application you then don't need to care about the url of your backend and you can then always do a request to a url like /api/some-express-route.

For this to work you need to configure your angular dev server to proxy the requests. For details on how to do this, please see the docs at https://github.com/angular/angular-cli#proxy-to-backend. When going to production, you can do this by configuring your web server, e.g. nginx to proxy the requests.

这篇关于前端和后端的不同端口.如何提出要求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！