When we used Webpack for project configuration in Vue, React and other projects, the data request in development mode would involve devserve. proxy, which is the reverse proxy middleware of Node.js.

The Node.js proxy is simple. Easily configure proxy server middleware connections, shipping, browser synchronization, and more. Just because it’s simple makes it easy for developers to ignore a small detail address fuzzy similarity

The sample

For example, there are two reverse proxies in the project:

B: A: http://192.168.1.100:80 http://192.168.1.135:80Copy the code

We ignore the port, and at this point A and B respectively proxy different servers. We add the following alias to the proxy address:

Proxy: {'/API ': {target: 'http://192.168.1.100:80', // A Server changeOrigin: true, pathRewrite: {'^/ API ': }}, '/api135': {target: 'http://192.168.1.135:80', // B Server changeOrigin: true, pathRewrite: {'^/api135': '/api'} } }Copy the code

/ API Agent SERVER A/API address

/ API135 Indicates the/API address of agent B

But if added in this order, there is a hidden naming convention of pit address fuzzy similarity

Assume that when we access/API135 / ABC, that is the real address B server/API/ABC. In this case, Webpack will first match/API, and then find/API proxy configuration to generate the final address A server/API135 / ABC.

Why not address/API/XXX?

At this point, Webpack only starts the regular match on the URL pathname, which is /^/ XXX /, and then queries with the start alias without changing/API, but /api135 first understand a feature that js loop objects loop in the order they were written. Therefore, / API is added before /api135

Just a quick demonstration of how this works

const pathname = "/api135/abc"; / / enter the address of the const alias = "/ API / / agent alias" const targetAndPath = "http://192.168.1.100:80/api" / / agent address: Server + path const reg = RegExp("^"+alias); If (reg.test(pathname)) {// if return pathname.replace(RegExp("^" + alias), targetAndPath); } / / http://192.168.1.100:80/api135/abc / / not through iteration to the nextCopy the code

To solve

The only way to solve this problem is to add the proxy configuration list in the project in order of the largest to smallest of the names, or to use another alias that does not match any of the matches. As follows:

Proxy: {' /api135': {target: 'http://192.168.1.135:80', // B Server changeOrigin: true, pathRewrite: {'^/api135': '/ API ': {target: 'http://192.168.1.100:80', // A Server changeOrigin: true, pathRewrite: {'^/ API ': '/api'} } }Copy the code

The last

If you don’t understand this, most of you will use the mainstream Vue, React, etc.

Here, I use Vue as an example. Other frameworks are similar. The relationship between dynamic routes and static routes is similar to that of Vue.

Which is the same thing as this

/api135
/api:path
Copy the code

* Copyright notice: This article is an original article, shall not be reproduced without permission.