Two Practical Ways for React to Open Agent

Two Ways to Open Agents

react does not encapsulate the code requested by ajax for us to use directly. When interacting, we need to encapsulate ajax code or use the third-party ajax library, so we use axios (lightweight).

Why do you need an agent first?

For example, when writing a server with port 5000 locally, when we make a request through port 3000, there will be a cross-domain problem (the original ajax engine of port 3000 intercepted the response), and the problem can be solved by proxy at this time. The so-called agent is a tool for transmitting information. The request with port 3000 is sent to the agent with port 3000, and then forwarded to the server with port 5000. When responding, because the agent is an agent without ajax engine, it can receive the response and then transmit it to the scaffold with port 3000, thus solving the cross-domain problem.

react Two Ways to Open Proxy

Method 1

Add "proxy" to the package. json file: "https://localhost: 5000" After the configuration, resources that are not available on Port 3000 will be found on Port 5000. That is to say, the request sent to port 3000 will be forwarded to the server opened on port 5000, but if the request is already in port 3000, it will not be forwarded to port 5000.

This method can only find one, but if you want to find it not only on port 5000, but also on other port numbers (configure multiple proxies), you should use the following method.

Method 2

Add 1 file of setupProxy to src (the scaffold of react will find this file) and copy the following code

After configuration, you need to add/api1 to the address where the request was sent before localhost: 3000, which means that if the resource required by the request is not found on port 3000, you will go to the proxy configured by api1, and then access port 5000. If you want to configure multiple agents, separate them with commas.

changeOrigin controls the value of the Host field in the response header received by the server. Here, if the default value is false, the server will assume that the request came from port 3000; But if you set it to true, the server will assume that the request came from port 5000 (it isn't). This may not be written, but it is better to write it.

When pathWrite, the request path was rewritten. In fact, the proxy was found at the beginning through/api, but when the proxy made a request to port 5000, the/api should be removed, such as https://localhost: 3000/api/student. If api is not removed, it is equivalent to the request address of/api/students, but in fact, the address we want to request should be/student.

const proxy = require('http-proxy-middleware');
​
module.exports = function (app) {
    app.use(
        proxy('/api1', {
            target: 'http://localhost:5000',  
            changeOrigin: true,      //  The default value is false
            pathRewrite: { '^/api1': '' }  
        }),
        proxy('/api2', {
            target: 'http://localhost:5001',
            changeOrigin: true,      //  The default value is false
            pathRewrite: { '^/api2': '' }
        }),
    )
}

Summarize