Antecedents that

Recently, the company has assigned an old system maintenance task, which uses springBoot without separation of the front end and jQuery+easyUI for the front end, and in the same general directory with the back end code. The front end code is hosted under the static service from the back end. As the front end is not familiar with springBoot, The previous modifications were made after the front-end code was changed and compiled by Maven to check. After modification, the service had to be restarted, and the local service could only be used for debugging. Although it is not impossible to develop, for me, who is used to the hot update of Webpack, it is almost like going back to the liberation before. In view of the development task is not very tight, after analyzing the project, I found that the front and back ends can be completely separated, just forwarding the address of the service request. This is the same as the proxyTable in vue.config.js.

Originally prepared to use NGINX to configure, but GOOSE I NGINX is only a superficial understanding of the tutorial on the Internet, have to use Node to achieve, at least my front end can understand. Do some digging, start a simple static service using Express, and then use HTTP-proxy-Middleware to delegate interface requests.

Setting matching rules

The http-proxy-Middleware documentation is pretty clear, but there are some things you can configure to match the interface rules. The interface proxy usually does things like forwarding requests that start with/API to the test server, but this time it needs to forward requests that end with.do to the target server. PathRewrite (” path “, “path”, “path”, “path”, “path”, “path”, “path”, “path”, “path”) It’s a hassle. After a while of fumbling, it turns out that the two asterisks stand for any, and **/*.do stands for requests ending in.do, and the matching rule is complete.

The forwarding of a cookie

In the process, we also found that cookie was used in our interface request header for interface verification, and each request must bring verification information. The http-proxy-middleware configuration item provides request and response processing functions. We can copy the cookie returned by the server to the proxy request. Simple code is as follows:

var cookie = null

var options = {
  onProxyReq(proxyReq) {
    // Copy the header of the local request to the agent.
    // Contains cookie information, so that you can use the cookie after login to request related resources
    if (cookie) {
      proxyReq.setHeader('cookie', cookie)
    }
  },
  onProxyRes(proxyRes) {
    // Copy the header returned by the server to the local request.
    // After the login is completed, there will be related cookies in the local return request, thus realizing the login function proxy.
    var proxyCookie = proxyRes.headers['set-cookie']
    if (proxyCookie) {
      cookie = proxyCookie
    }
  }
}
Copy the code

Final configuration is as follows

const express = require('express')
const { createProxyMiddleware } = require('http-proxy-middleware')

const args = process.argv.splice(2)

// Target is set to local for local debugging, default is remote test server
var target = 'http://X.X.X.X:XX'
if (args.length > 0 && args.includes('localhost')) {
  target = 'http://localhost:XX'
}

// Interface proxy
var cookie = null
const options = {
  target,
  changeOrigin: true.// Handle cross-domain
  onProxyReq(proxyReq) {
    // Copy the header of the local request to the agent.
    // Contains cookie information, so that you can use the cookie after login to request related resources
    if (cookie) {
      proxyReq.setHeader('cookie', cookie)
    }
  },
  onProxyRes(proxyRes) {
    // Copy the header returned by the server to the local request.
    // After the login is completed, there will be related cookies in the local return request, thus realizing the login function proxy.
    var proxyCookie = proxyRes.headers['set-cookie']
    if (proxyCookie) {
      cookie = proxyCookie
    }
  },
  logLevel: 'debug' / / string, optional [' debug ', 'info', 'warn', 'error' and 'silent'], the default value 'info'
}

/ / agency rules: https://github.com/chimurai/http-proxy-middleware#readme
const pathRule = ['**/*.do'.'**/getAllRoles'.'/boot/OA/**']

const apiProxy = createProxyMiddleware(pathRule, options)

const app = express()

// boot static front-end directory path, add a /boot virtual address because some front-end write based on the deployment path jump
app.use('/boot', express.static('xxx/src/main/resources/static'))
app.use('/', apiProxy)

app.listen(3000.() = > {
  console.log(`server is running on port The ${3000}`)})Copy the code

If you need the proxy’s interface later, you simply add the proxy rules to the pathRule array.

conclusion

In less than 50 lines of code, we decoupled the front and back end development from relying on services from the back end. We could just tweak and refresh and see the effect, even though the code was simple. However, the efficiency of development has been improved to a certain extent, and they are also very happy to share it with their group partners. Things at work can be improved or we should try, rather than everyone developed this way, why should I try another way, it has always been so, is it right? Although it takes your time, it improves the efficiency of the team, which is also a kind of team infrastructure.

Later, I also wanted to integrate WEBpack’s HMR service, but failed all the time. Since the maintenance work has been completed, I have no motivation to do this again.