“This is the 19th day of my participation in the August Gwen Challenge.

This article focuses on interface forwarding and provides two server addresses for testing

  1. Data interface example: http://111.229.14.189/gk-api Available test interface, click access
  2. File interface example: http://111.229.14.189/file can test the address, click on the visit

How does interface forwarding work first, and then how does it work

How to do

There are two types of interface forwarding:

  • In the first case, you define a prefix on the front end, but the prefix does not exist on the back end. When forwarding, you need to remove the prefix on the front end, which is generally used to access the interface.

  • In the second case, both the front end and the back end have a prefix and do not remove the prefix when forwarding.

Using vue as an example, add the following code to vue.config.js

// Interface server
const API_SERVER='http://111.229.14.189'
// File server
const FILE_SERVER='http://111.229.14.189'

module.exports={
    // Only valid for development, invalid after packaging
    devServer: {
        open: true.// Automatically open the browser
        proxy: {
            '/file': {target: FILE_SERVER, // Address of the back-end interface of the development environment
                changeOrigin: true.autoRewrite: true.cookieDomainRewrite: true,},'/my-custom-prefix': {target: API_SERVER, // Address of the back-end interface of the development environment
                changeOrigin: true.autoRewrite: true.cookieDomainRewrite: true.pathRewrite: {'^/my-custom-prefix': ' '}}}},}Copy the code

Then add the following code to main.js

//--------------- Tests interface forwarding
import axios from 'axios'
/ / / http://localhost:8080/file/1.jpeg - > http://111.229.14.189/file/1.jpeg
axios.get('/file/1.jpeg').then(res= >{console.log('file response',res)})
/ / / http://localhost:8080/my-custom-prefix/gk-api/util/test - > http://111.229.14.189/gk-api/util/test
axios.get('/my-custom-prefix/gk-api/util/test').then(res= >{console.log('api response',res)})
Copy the code

Run NPM run serve. In the browser, you can see that both interfaces are successfully forwarded

The first interface looks like this: http://111.229.14.189/gk-api/util/test

/my-custom-prefix = /my-custom-prefix = /my-custom-prefix = /my-custom-prefix

When I visit urls with the /my-custom-prefix prefix, they are all forwarded to the back end interface that is, when I visit http://localhost:8080/my-custom-prefix/gk-api/util/test, Actually, visit http://111.229.14.189/gk-api/util/test

Because the front end adds a prefix, but the back end does not have the prefix, you need to remove the prefix and use pathRewrite to remove the prefix

 '/my-custom-prefix': {target: API_SERVER, // Address of the back-end interface of the development environment
        changeOrigin: true.autoRewrite: true.cookieDomainRewrite: true.pathRewrite: {'^/my-custom-prefix': ' '}}Copy the code

In the second case, access the file server and forward as follows:

http://localhost:8080/file/1.jpeg - > http://111.229.14.189/file/1.jpeg

When configuring forwarding, there is no need to add pathRewrite, other configurations are the same.

How does it work

The application started by the server and the front-end is from different sources. If the browser has the same origin policy, the interface cannot be accessed.

The processing idea of front-end interface forwarding is as follows: Start a proxy server with the same origin as the front-end program, the front-end program sends requests to the proxy server, and the proxy server forwards the requests to the server (there is no same-origin policy between servers).

Browser -> Server becomes browser -> proxy server -> server

Note that when forwarding, the proxy server is accessed, and the URL is also the URL of the proxy server, not the back-end interface server.