React configures reverse proxy to solve cross-domain and possible problems and troubleshooting

react configure reverse proxy

When I recently obtained the interface of a website, I found that it was cross-domain, but I didn’t want to hand-write the backend interface, so I thought of reverse proxy on the front end. What is a reverse proxy? To put it simply, it means that local projects transfer to local servers. When the server obtains the interface, if you need to call someone else's server interface, obviously the local computer does not have the relevant interface, so it will cause a cross-domain situation, so you need to configure a reverse proxy to tell our computer if it encounters To the relevant interface, you need to obtain this interface from other servers. That is, the local server first obtains the data from the foreign server and returns it to you through itself. Then this part is blocked from us on the local server, that is, it cannot be seen. Yes, here is how to configure a reverse proxy in react:
First you need to use a package:

 http-proxy-middleware
 //使用以下命令安装
 npm i http-proxy-middleware

Then create a new setupProxy.js page in the src folder of the project file . At this time, the page is blank. Write the following code:

const {
    
    createProxyMiddleware} =require('http-proxy-middleware')  //导入需要的包，解构出需要的模块

module.exports=function(app)
{
    
    
    app.use(
        '/ajax',   //这里的路径是表示需要代理请求的路径开头，所有以这个路径开头的请求地址均需要进行反向代理
        createProxyMiddleware({
    
    
        target:'https://m.maoyan.com', //反向代理的外地服务器ip地址，使用域名也可以
        changeOrigin:true,  //需要跨域，为true
   		//pathRewrite:{} 是否需要路径重写，如果你是以自己重新命名的路径开头，那么你需要重写那个开头，以保证向外地服务器发送正确的请求url地址
    }))
}

In summary, the reverse proxy is ready. Let’s try it out by writing a simple interface:

import axios from 'axios'
import React, {
    
     Component } from 'react'

export default class App extends Component {
    
    
  display()
  {
    
    
    alert('nihao')
  }
  componentDidMount = () => {
    
    
    axios.get('/ajax/comingList?ci=20&token=&limit=10&optimus_uuid=B165385059EF11EDB8B9D363BBB961CAD5E292F07589491FB93252E5838E4855&optimus_risk_level=71&optimus_code=10')
            .then(res=>{
    
    
              console.log(res.data.coming);
            })
  }
  
  render() {
    
    
    return (
      <div>
          <button onClick={
    
    ()=>{
    
    
            axios.get('/ajax/comingList?ci=20&token=&limit=10&optimus_uuid=B165385059EF11EDB8B9D363BBB961CAD5E292F07589491FB93252E5838E4855&optimus_risk_level=71&optimus_code=10')
            .then(res=>{
    
    
              console.log(res.data);
            })
          }}>获取</button>
      </div>
    )
  }
}

After loading, click the button to get the information:

View the information related to sending the request in the browser:

Here you can see that although our destination address is another website, the URL address shown here is our localhost:3000. It means there is no problem with reverse proxy.
Then, I discovered an important problem:
If you create a new service directory in src, such as appxjd, and then continue to write new projects in it, then add route, and in the hook function componentDidMount of a sub-component inside, send a cross When making domain requests, you will always find 404 not found :

import axios from 'axios'
import React, {
    
     Component } from 'react'

export default class app extends Component {
    
    
  state={
    
    
    list:[]
  }
  componentDidMount = () => {
    
    
    axios.get({
    
    
      url:'/ajax/comingList?ci=20&token=&limit=10&optimus_uuid=B165385059EF11EDB8B9D363BBB961CAD5E292F07589491FB93252E5838E4855&optimus_risk_level=71&optimus_code=10'
    }).then(res=>{
    
    
      console.log(res.data);
    })
  }
  
  render() {
    
    
    return (
      <div>
        即将上映的电影
        <button onClick={
    
    ()=>{
    
    
            axios.get('/ajax/comingList?ci=20&token=&limit=10&optimus_uuid=B165385059EF11EDB8B9D363BBB961CAD5E292F07589491FB93252E5838E4855&optimus_risk_level=71&optimus_code=10')
            .then(res=>{
    
    
              console.log(res.data);
            })
          }}>获取</button>
      </div>
    )
  }
}

But there is indeed no problem with the request I made in the button button of the component:

so I can't make the request in the hook function, so I can only write a function. After loading the dom structure, execute the corresponding function to replace this problem.
In the future, I will study how to solve the problem of this hook function sending cross-domain requests, but it is worth mentioning that the external one is still used normally. I don’t know if it is related to route, but it is unlikely. I will write a blog when the results are found. Answer this question.
Okay, that’s it for today’s article.