React脚手架中配置代理解决跨域问题

来源：
1
2

问题：

• 新建一个react项目（端口号为3000），直接访问端口号为5000的服务器地址，存在跨域问题

使用proxy添加代理解决跨域问题（已失效）

• 代理先在3000端口寻找是否有此资源，如果没有，再转发至5000端口
  
• React

  import React, {Component} from 'react';
  import axios from 'axios';
  class Index extends Component {
    
    getStudentData = () => {
      axios.get('http://localhost:3000/students').then(
        response => {console.log('成功了', response.data);},
        error => {console.log('失败了', error);}
      );
    }
    render() {
      return (
        <div>
          <button onClick={this.getStudentData}>点我获取学生数据</button>
        </div>
      );
    }
  }
  
  export default Index;
  

• package.json

  {
  	"proxy": "http://localhost:5000"
  }
  

配置多个代理

• npm install http-proxy-middleware
• 在src目录下新建setupProxy.js

  const proxy = require('http-proxy-middleware')
  
  module.exports = function(app) {
    app.use(
      proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
        target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
        changeOrigin: true, //控制服务器接收到的请求头中host字段的值
        /*
        	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
        	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
        	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
        */
        pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
      }),
      proxy('/api2', { 
        target: 'http://localhost:5001',
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      })
    )
  }
  

• React

  import React, {Component} from 'react';
  import axios from 'axios';
  class Index extends Component {
    
    getStudentData = () => {
      axios.get('http://localhost:3000/api1/students').then(
        response => {console.log('成功了', response.data);},
        error => {console.log('失败了', error);}
      );
    }
  
    getStudentData = () => {
      axios.get('http://localhost:3000/api2/cars').then(
        response => {console.log('成功了', response.data);},
        error => {console.log('失败了', error);}
      );
    }
  
    render() {
      return (
        <div>
          <button onClick={this.getStudentData}>点我获取学生数据</button>
          <button onClick={this.getCarData}>点我获取汽车数据</button>
        </div>
      );
    }
  }
  
  export default Index;