Two practical ways to enable proxy in React

Two ways to enable proxy

React does not have encapsulated ajax request code for us to use directly. When interacting, we need to encapsulate the ajax code ourselves or use a third-party ajax library. Generally, we use axios (lightweight).

Why do we need an agent?

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 intercepts the response). At this time, the problem can be solved by using a proxy. The so-called proxy is a tool for transmitting information. The request with port 3000 is sent to the proxy opened on port 3000, and the proxy forwards it to the server on port 5000. When responding, since the proxy does not have an ajax engine, it can receive the response and then pass it to the scaffolding opened on port 3000, thus solving the cross-domain problem.

Two ways to open the proxy in react

Method 1

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

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

Method 2

Add a setupProxy file in src (react scaffolding will find this file), copy the following code

After configuration, you need to add /api1 to the address localhost:3000 where the request was sent before. This means that if the requested resource is not found on port 3000, the proxy configured by api1 will be used to access port 5000. If you want to configure multiple proxies, separate them with commas.

changeOrigin is used to control the value of the Host field in the response header received by the server. Here, if the default value is false, the server will think that the request comes from port 3000; but if its value is set to true, the server will think that the request comes from port 5000 (which it is not). You don’t have to write this, but it’s best to write it.

The request path is rewritten during pathWrite. In fact, the proxy is found through /api at the beginning, but when the proxy makes a request to port 5000, /api must be removed, such as https://localhost:3000/api/student. If api is not removed, the request address is equivalent to /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, // default value is false
            pathRewrite: { '^/api1': '' }
         }),
        proxy('/api2', {
            target: 'http://localhost:5001',
            changeOrigin: true, // default value is false
            pathRewrite: { '^/api2': '' }
       }),
   )
}

Summarize

This concludes this article about the two ways to enable proxy in React. For more information about how to enable proxy in React, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!