Reac03:react脚手架配置(代理配置)

reactAjax

• React本身只关注于界面，并不包含发送ajax请求的代码
• 前端应用需要通过ajax请求与后台进行交互(json数据)
• react应用中需要集成第三方ajax(或自己封装)

常用的ajax请求库

• jquery:比较重不建议
• axios:轻量级，建议使用

下载Axios

yarn add axios

import axios from "axios";

const App = () => {
  
  const getDepts = () => {
    axios.get('http://localhost:8080/api/dept/getDepts').then(
      response=>{
        console.log('成功了',response.data)
      },
      error=>{
        console.log('失败了',error)
      }
    )
  }

  return (
    <div>
      <button onClick={()=>getDepts()}>点击获取数据</button>
    </div>
  )
}
export default App;

上述代码中由于ajax同源策略(同一域，同一端口限制)，前端是3000端口，后端是8080端口发生了跨域问题。

• 同一域不同端口号：前端可以发送请求但是无法接收数据
• 不同域不同端口：请求都无法发送
  由于发生了跨域问题，此时在前端必须配置代理来解决跨域问题

配置代理

• 第一种配置方式
  
  此时请求代码为：

 const getDepts = () => {
    axios.get('http://localhost:3000/api/dept/getDepts').then(
      response=>{
        console.log('成功了',response.data)
      },
      error=>{
        console.log('失败了',error)
      }
    )
  }

前端代码先从3000去找，找不到的话代理服务器再从8080去找

第二种配置代理的方式

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

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/api', {
            target: 'http://localhost:8080/',
            changeOrigin: true,
            pathRewrite: {'^/api': ''}
        }),
        createProxyMiddleware('/api1', {
            target: 'http:localhost: 8081',
            changeOrigin: true,
            pathRewrite: {'^/api1': ''} 
        })
    )
}

• 请求代码

  const getDepts = () => {
    axios.get('/api/dept/getDepts').then(
      response=>{
        console.log('成功了',response.data)
      },
      error=>{
        console.log('失败了',error)
      }
    )
  }

target: 请求转发给谁
changeOrigin:控制服务端收到的请求头的host字段的值，如果是true则服务端收到的host为服务端host，false的话服务端收到的地址为代理服务器地址
pathRewrite：重写请求路径，将/api1替换成‘’

github搜索案例

码云地址：https://gitee.com/www_zzq_com/react_ts_study