This is the 27th day of my participation in the August More Text Challenge

📢 Hello everyone, I am Xiao Cheng, a prospective sophomore front-end enthusiast

📢 This article is a guide to learning about scaffolding configuration agents in React

📢 Thank you very much for reading

📢 May you be true to yourself and love life

The introduction

React itself focuses only on the page and does not contain the code to send Ajax requests, so it is generally integrated with third-party packages or packaged in its own way

Their encapsulation, more trouble, and may not consider the whole

There are two commonly used libraries, one is JQuery and one is Axios

  1. JQuery is a bit heavy, because Ajax services are only a small part of its library. It mainly does DOM manipulation, which is bad for React and is not recommended
  2. Axios is lighter and promises style, so the logic is relatively clear and recommended

So here we use AXIos to send client requests

In the past, we often encountered a very important problem when sending requests: cross-domain!

In my previous study, basically we need to operate the back-end server code to solve the cross-domain problem, configure the request header, use script, all of which need the cooperation of the back-end server, so if we need to solve this problem by ourselves, we need this technology: proxy.

Before we talk about proxies, why cross-domains?

This should be the same origin policy from the browser. The so-called homology (that is, in the same domain) means that two pages have the same protocol, host, and port number. If any of the protocol, domain name, and port of a URL request is different from the current page URL, it is called cross-domain.

In other words, XXX :3000 and XXX :4000 will have cross-domain problems, and XXX :3000 and ABC :3000 will have cross-domain problems

Then we use the way of configuring proxy to solve this problem

Cross-domain problem solving will be summarized in a later article

1. Global proxy

The first method, I call the global proxy because it configures the proxy directly in the configuration file package.json

"proxy":"http://localhost:5000"  
// "proxy":" requested address"
Copy the code

If the file cannot be accessed, the file will be forwarded to the address configured here

All we need to do is change the address of the request to the address of the forward in our request code

However, there are some problems in this way. It will first request data from the address we requested, which is port 3000 here. If there is a file we need to access in port 3000, it will directly return, and will not forward

This can be problematic, and because this approach is globally configured, it can only be forwarded to one address, not multiple proxies

2. Configure it separately

This is my own name, and it’s a nice way to configure proxies for multiple requests

It works the same as global configuration, but is written differently

First we need to create the proxy configuration file setupproxy.js in the SRC directory

Note: this file can only be called by this name, and the scaffold will automatically execute these files when it starts up

The second step

Configure specific proxy rules. What do we mean by that

  1. First we need to import the HTTP-proxy-middleware middleware, and then we need to export an object. We recommend using functions, which are not compatible

  2. Then we need to configure our proxy rule in app.use. First of all, the first parameter received by proxy is the request to be forwarded. We need to add /api1 to our axios request path so that all requests prefixed with/API1 will be forwarded here

  3. The second parameter takes an object that is used to configure the proxy.

    • targetProperty is used to configure the forwarding destination address, which is the address of our data
    • changeOriginProperty is used to control the request headers received by the serverhostField, which can be understood as a camouflage effect, fortrueWhen, receivedhostIs the address of the requested data
    • pathRewriteAttribute is used to remove the request prefix, because when we request through the proxy, we need to add a flag before the request address, but the actual address does not exist this flag, so weBe sure to removeThis prefix, it’s a little bit like regular substitution

The complete code for configuring an agent is as follows

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    proxy('/api1', { 
      target: 'http://localhost:5000'.// Configure the forwarding target address
      changeOrigin: true.// Controls the value of the host field in the request header received by the server
      pathRewrite: {'^/api1': ' '} // Remove the request prefix (must be configured))}}),Copy the code

That’s it for scaffolding configuration agents!

Thank you very much for reading, welcome to put forward your opinion, if you have any questions, please point out, thank you! 🎈