Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to build a proxy server in nodejs. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Front-end developers often encounter cross-domain problems in their work. Generally speaking, we mainly use the following methods to solve cross-domain problems:

1 、 jsonp

2 、 cors

3. Configure the proxy server.

Jsonp is not very flexible and can only send get requests, but not psot requests. Although cors can support multiple request formats, if the request carries cookie, it also needs to be configured by the server and the client, which is also troublesome.

Compared with the first two, it is much easier to use a proxy server to solve cross-domain problems.

Due to the same origin policy, the browser sends ajax requests between different domain names, and the response data will not be loaded by the browser. On the other hand, there is no restriction of the same origin policy when the server sends requests to the server.

The following figure shows how the proxy server works:

Proxy server only plays a transit role, there are many ways to configure proxy server, such as using apache, nginx, tomcat and so on. What we introduce today is to configure proxy server with nodejs and configure proxy server with nodejs. We need two npm packages, one is web development framework express, the other is express middleware http-proxy-middleware.

In the first step, we use express to build two servers. A static resource server port number is 3000, and an interface server port number is 5000. The static resource server code is as follows:

Var express = require ('express')

Var app = express ()

App.use (express.static (. / public'))

App.listen (3000)

And create a new a.html under the public folder, and use jquery in the page, send ajax using jquery to send a test request to the interface server.

The a.html code is as follows:

Then build the interface server. The port number of the interface server is 5000, and the code is as follows:

Looking at the code, we designed three interfaces, all of which are get requests, but the url is different.

At this point, start the static resource server and interface server, and then access the a.html under the static resource server. The result is as shown in the figure:

As shown in the figure, when a cross-domain occurs, install http-proxy-middleware middleware in the static resource server and integrate it into the static resource server.

The code is as follows:

Restart the static resource server at this time, and change the address of sending ajax in the a.html page slightly, as shown in the figure:

Observe the code: our code used to directly request the data of the 5000 port server, now change it to the relative path, relative to the server where the current web page is located, the static server port of the current web page is 3000.

When we visit: http://localhost:3000/a.html, the result is as follows:

See how the address requested by ajax is concatenated:

It is concluded that the relative paths will be spliced automatically.

If you look at the result of the request, it is successful:

Successfully cross-domain, of course, this is not rigorous, the browser does not participate in cross-domain, but the address of the ajax request on the page is still the service on port 3000, but the service on port 3000 receives the request, forwards it to the service on port 5000, and returns the service result of port 5000 to the browser intact.

Reviewing the above code, we only applied http-proxy-middleware middleware to the static resource server. The use of this middleware is very simple, which is divided into the following steps:

1. Install and introduce into the project.

2. Mount the middleware through app.use. It should be noted here that when mounting the middleware, app.use needs to set a pre-route to distinguish it from the original route of the project.

Several common parameters need to be set when calling this middleware:

1. Target refers to the target website, or the website being proxied.

2. Whether changeOrigin changes host. The default is false and is not overridden.

3. PathRewrite path rewriting, this feature depends on the requirement.

Simple configuration:

If configured like this, when a request is sent in a.html, it is written as follows:

This request is converted by the static resource server to:

Http://localhost:5000/api/a

That is, if pathRewrite is not set, the request address in the page will be appended to the destination server address intact.

And if the real interface address is like this:

Http://localhost:5000/b

How to configure the proxy server?

At this point, send a request on the page:

At this point, according to the rewriting rules of the proxy service, the final requested address is:

Http://localhost:5000/b

These are the functions of pathRewrite.

Let's take a look at the role of changeOrigin. When we set changeOrigin to true, we print req.headers on the interface server to see what the result is:

Take a closer look at host as localhost:5000 and change changeOrigin to false? Print the req.headers again:

Check that host is localhost:3000 at this time

ChangeOrigin is whether to rewrite the host in the request header. The proxy server will add the corresponding Host header to the request header, and then the target server can distinguish the site to be visited according to this header. If you set up an apache server on local port 80, the server is equipped with two virtual sites a.com b.com, after setting the proxy, and the changeOrigin is true. At this point, you can access the contents of the document under the virtual host in the correct way. Otherwise, visiting a / b site is equivalent to visiting localhost Of course, if your server is not configured with a virtual host, you can omit this parameter, just like the code shown above. Because the interface server does not set up a virtual host.

After reading the above, do you have any further understanding of how to build a proxy server in nodejs? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.