React - 脚手架中配置代理，解决请求接口跨域问题

方法一：配置 package.json 文件

不能配置多个代理，只能配置单个代理
当请求了当前项目不存在的资源时，那么该请求会转发给5000（优先匹配当前项目资源）

1. 打开 package.json 文件，进行配置
   "proxy":"http://localhost:5000"
   
2. 使用方法

   import React, { Component } from 'react'
   import axios from 'axios'
   
   export default class App extends Component {
       getData1 = () => {
           // 会指向配置中的 http://localhost:5000 调用 /search/data1 接口地址
           axios.get("http://localhost:3000/search/data1").then(res => {
               console.log(res)
           })
       }
       render() {
           return (
               <div>
                   <button onClick={this.getData1}>获取数据1</button>
               </div >
           )
       }
   }
   

方法二：创建 setupProxy.js 文件进行配置（推荐）

可以配置多个代理，可以灵活的控制请求是否走代理。
请求接口的时候必须加上所配置的前缀。

1. 在src文件夹下创建配置文件：setupProxy.js，创建的配置文件名不可自定义

2. 配置 setupProxy.js 文件

   const { createProxyMiddleware } = require('http-proxy-middleware')
   
   module.exports = function (app) {
       app.use(
           /**第一个请求配置 */
           createProxyMiddleware('/api1', {	//需要转发的请求（当请求中有api1前缀的请求，会触发该代理配置）
               target: "http://localhost:5000",//配置转发目标地址(能返回数据的服务器地址)
               changeOrigin: true,//控制服务器收到的请求头中host的值
               /*
   	         	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   	         	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
   	         	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
   	         */
               pathRewrite: { '^/api1': '' }//重写请求路径，去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
           }),
           /**第二个请求配置 */
           createProxyMiddleware('/api2', {//需要转发的请求（当请求中有api2前缀的请求，会触发该代理配置）
               target: "http://localhost:5002",//配置转发目标地址(能返回数据的服务器地址)
               changeOrigin: true,//控制服务器收到的请求头中host的值
               /*
   	         	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   	         	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
   	         	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
   	         */
               pathRewrite: { '^/api2': '' }//重写请求路径，去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
           })
           /** 更多请求配置... */
       )
   }
   

3. 使用方法

   import React, { Component } from 'react'
   import axios from 'axios'
   
   export default class App extends Component {
       getData1 = () => {
           // 使用 代理1 调用 /search/data1 接口获取数据
           axios.get("/api1/search/data1").then(res => {
               console.log(res)
           })
       }
       getData2 = () => {
           //  使用 代理2 调用 /search/data2 接口获取数据
           axios.get("/api2/search/data2").then(res => {
               console.log(res)
           })
       }
       render() {
           return (
               <div>
                   <button onClick={this.getData1}>获取数据1</button>
                   <button onClick={this.getData2}>获取数据2</button>
               </div >
           )
       }
   }