React配置反向代理解决跨域，以及可能出现的问题，排坑

react配置反向代理

最近获取某网站接口的时候，发现被跨域了，但是又不想手写后台那一条接口，所以就想到在前端进行反向代理，什么是反向代理呢，说简单点，就是本地项目向本地的服务器获取接口的时候，如果你需要调取别人的服务器接口，显然本地的计算机是没有相关接口的，所以会引发一种跨域的情况，所以需要配置反向代理，告诉我们的计算机，如果碰到相关的接口，那你需要向别的服务器获取这个接口，也就是本地服务器先向外地服务器获取数据在通过自己返回给你，然后这一块在本地服务器是对我们屏蔽的，也就是看不到的，下面介绍下react中如何配置反向代理：
首先需要用到一个包：

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

之后在项目文件的src文件夹下，新建一个setupProxy.js页面，此时页面空白，将下述代码写入：

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地址
    }))
}

综上，反向代理就写好了，写一个简单的界面来试一下：

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>
    )
  }
}

加载后点击按钮，获取到信息：

在浏览器查看发送请求的相关信息：

这里可以看到，虽然我们的目的地址的别的网站，但是这里所表现出来的url地址却是我们的localhost：3000，说明反向代理没问题。
然后，发现一个重要的问题：
如果src里面在创建一个新的服务目录，比如appxjd，然后在里面继续写新的项目，然后添加route,在里面的某一个子组件的钩子函数componentDidMount中，发送跨域请求，会发现一直404not 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>
    )
  }
}

但是我在该组件的button按钮中进行的请求确实没有问题的：

所以我没办法在钩子函数中请求，所以只能写一个函数，在加载完dom结构之后，执行对应的函数来代替这个问题。
后续我研究下怎么解决这个钩子函数发送跨域请求的问题，但是值得一提的就是外面的还是正常使用的，不知道是不是和route有关，但是可能性不大，有结果再写一篇博客解答这个问题。
好的，今天的文章就水到这里。