react中的proxy跨域解决

在我们请求后端数据的时候，往往会出现跨域的问题，这时候就需要我们解决一下跨域问题了。
比如下面我需要请求一下这个后端数据：http://47.96.0.211:9000/db/in_theaters。

父组件

import React, { Component } from 'react';
import Proxy from "./components/proxy"

class App extends Component{
  render(){
    return(
      <div>
        <Proxy></Proxy>
      </div>
    )
  }
}

export default App;

子组件

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

export default class index extends Component {

    componentDidMount(){
        axios.get("http://47.96.0.211:9000/db/in_theaters").then(res=>{
            console.log(res)            
        })
    }

    render() {
        return (
            <div>
                proxy
            </div>
        )
    }
}

很明显，如果这样直接请求的话，我们注定是失败的。在这里我们可以通过代理做一下跨域请求。

代理可以分为两种：正向代理和反向代理，这里就不细谈了。

那我们如何解决这个跨域问题呢？我们有两种方法解决。

1. 通过更改node-modules/react-scripts/webpack-dev-server.js文件的proxy选项解决

proxy: {
      "/api": {
        target: "http://47.96.0.211:9000",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    },

子组件

componentDidMount(){
        axios.get("/api/db/in_theaters").then(res=>{
            console.log(res)            
        })
    }

这样就可以正常访问了。但是直接更改node-modules/react-scripts/webpack-dev-server.js文件的proxy选项会有一个小问题。
后续如果继续安装其他模块的话，yarn内部就会进行检测看看有没有文件被改动过，重新变成原来的样子。
那我们怎么解决这个小问题呢？我们可以通过安装 eject 弹射模块来解决。
在这里插入图片描述
如果弹射失败，你可以

把.git文件夹删掉
删除node_modules文件，重新执行yarn 或 npm i

如果成功了，后续只需要对于config/webpackDevServer.js文件的proxy选项进行更改即可。

如果你不想弹射的话，可以尝试第二种方法。

2. 使用 http-proxy-middleware 模块解决跨域问题

安装完毕后，我们需要在src/根目录下面 setupProxy.js文件（注意：一定得是 setupProxy.js 文件夹，名字不可更改）。
然后在这个文件里面配置我们的组件即可。

const {createProxyMiddleware} = require("http-proxy-middleware");
module.exports = function(app){
    app.use(
        createProxyMiddleware("/api",{
            target:"http://47.96.0.211:9000",
            changeOrigin:true,
            pathRewrite:{
            "^/api":""
            }
        })
    )
}

这样，我们的接口就请求出来了。
在这里插入图片描述