Analysis of common problems in the http proxy library http-proxy in nodejs

The content of this article is about the analysis of common problems in the http proxy library http-proxy in nodejs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

http-proxy

http-proxy is a nodejs http proxy library, which has been integrated by webpack-dev-server and used as a proxy. The reason is that today, when the separation of front-end and back-end is popular, if we need to adjust the back-end API interface locally without configuring hostname, it will inevitably be a cross-domain request. Because of the cross-domain security restrictions of the browser, the call is blocked, so the local proxy has become a must for a local development environment.

'/saasapi/*': {
    target: 'http://ebk.17u.cn',
},

The meaning is probably to redirect the ajax request starting with saasapi to http://ebk.17u.cn

There is no problem with local development, and the same is true for online development If a server using nodejs happens to be configured with a proxy, unexpected problems may occur when deployed online~

Backend nginx is configured with a reverse proxy

The main domain name of a website is 17u. cn, if multiple api services are deployed on the backend, then his api service may look like this

##17u.cnebk.17u .cnebk2.17u.cnebk3.17u.cn##The front end also deploys 3 nodejs services, and the same 3 agents are configured. After deploying it online, we found that the request always points to the first second-level domain name, and other second-level domain names cannot be accessed.

Primary domain name	Secondary domain name 1	Second-level domain name 2	Second-level domain name 3

I can’t think of my sister!

After carefully checking the http information, I found that after the ajax requests of several services were sent to the server, the hostname was the domain name of the browser, and the reverse proxy configuration of nginx was forwarded based on the hostname. Because our hostname is unfamiliar to nginx, it is forwarded to the default first service by default.

I checked the http-proxy configuration, haha, indeed there is such a modified configuration, just change it a little.

'/saasapi/*': {
    target: 'http://ebk.17u.cn',
    changeOrigin: true
},

changeOrigin: true

It means just change the hostname to be consistent with the target. In this way, the backend nginx can forward normally. The backend is configured with cookie Path

The backend api not only configures the second-level domain name, but also configures the second-level directory. The services deployed on the front-end also require the second-level directory.

The api address will look like this:

ebk.17u.cn/saasapi

Front-end address:

trans.17u.cn/saas

Adjust the proxy configuration accordingly

'/saas/saasapi/*': {
    target: 'http://ebk.17u.cn',
    changeOrigin: true,
    rewrite: path => path.replace(/^\/saas\/saasapi\/cxy/, '/saasapi')
},

This looks normal, right? , but what’s the problem? The backend also sets the path for the cookie set after logging in:

Path='/saasapi'

. The problem arises.

trans.17u.cn/saas

The cookie below /saasapi cannot be read under the current domain name, causing the front-end to log in every time All passed, but the api cannot be adjusted normally. Every time it is called, it prompts that you are not logged in. If you have any questions, please check the documentation first.

I still found a solution

cookiePathRewrite: { '/saasapi': '/saas/saasapi' }

Just rewrite the cookie path. Similarly, if the backend interface specifies the domain of the cookie, there is still a solution

cookieDomainRewrite

Also There are some other rewrites that should be easier to use.

ps: In the process of solving the problem, I found that the modification was always unsuccessful. I once suspected that it was a bug in the library. Later I found that I needed to clear chrome's cookies.

Click Application -> Cookie: It is not possible to delete the following cookies. All cookies cannot be cleared. You need to go to Application -> clear storage and clear site data. Final success

Related recommendations:

Detailed analysis and difference comparison of front-end modularization in Js

What are the methods in jQuery ?Commonly used methods in jQuery (with code)

The difference and conversion between jQuery objects and native DOM objects

The above is the detailed content of Analysis of common problems in the http proxy library http-proxy in nodejs. For more information, please follow other related articles on the PHP Chinese website!