React 代理解决跨域问题

第一种================

// 在package.json中添加如下片段
"proxy":"http://10.57.241.94:8080/api/"

1.优点：配置简单，前端请求资源时可以不加任何前缀
2.缺点：不能配置多个代理
3.工作方式：优先匹配前端资源–就是说当找不到前端资源时才会去找后端资源

第二种================

1.在src文件下新建setupProxy.js

const proxy=require('http-proxy-middleware')
module.exports=function(app){
    app.use(
        proxy('/api1',{// 遇见/api1前缀的请求，就会触发该代理配置
            target:'http://10.57.241.94:8080/api/',// 请求转发给谁
            changeOrigin:true,// 控制服务器收到的请求头中host的值
            pathRewrite:{'^/api1':''}// 重写请求路径
        })
    )
}

注：changeOrigin:默认值为false,若==false,如果是请求头，则传去后台的值为请求头，若为true,则传去的值为http://10.57.241.94:8080。这也就是为什么解决了跨域问题：实际请求是http://localhost:3000但由于设定了代理，使后台以为前台请求域与后台一致，从而解决了跨域

2.通过axios使用代理

前提是需下载axios:
下载：npm i axios /yarn add axios
引入：import axios from ‘axios’

getInfo=()=>{
    axios.get('/api1/PadUser/checkPasswordAndInitializeSession?empid=O19120001&emppwd=Wistron123456.').then(
      response=>{console.log('成功了！',response)},
      error=>{console.log('失败了',error)}
    )
  }

  render() {
    return (
      <div>
        <button onClick={this.getInfo}>测试前后台连接</button>
      </div>
    );
  }
}