react 项目请求后端数据及跨域配置

一 . axios请求数据

1.安装axios和使用方式

1.在项目目录下输入以下命令:
  npm i axios
2.在需要使用的页面引入
import axios from 'axios'

2.axios请求案例

1.post请求
   axios.post('https:/www.baidu.com/api1/carInfo',{id:'0001'}).then(res=>{
           console.log(res.data)
        },
        error=>{
          console.log('失败了',error)  
      })
2.get请求
   axios.get('https:/www.baidu.com/api1/carInfo',{id:'0001'}).then(res=>{
           console.log(res.data)
        },
        error=>{
          console.log('失败了',error)  
      })

二 . axios跨域配置

方法(一)

1. 在跟目录package.json文件内 添加 "proxy":"http://localhost:5000"配置文件  (http://localhost:5000 为后端请求地址和端口号)
2. 优点: 配置简单,前端请求资源时可以不加任何前缀
3. 缺点 : 不能配置多个代理
4. 工作原理: 当请求了当前不存在的资源时,该请求会转发给配置的地址

方法(二)

1. 在src目录下新建setupProxy.js文件(必须是这个名字,不能修改名称否则配置会失败)
2. 在setupProxy.js编写如下代码:
const proxy = require('http-proxy-middleware')
        module.exports = function(app){
        app.use(
            proxy('/api1',{//遇见/api1前缀的请求,就会触发代理配置
                target:'http://localhost:5000',//请求转发给谁
                changeOrigin:true, //控制服务器收到的响应头中host字段的值
                pathRewrite:{'^/api1':''}//重写请求路径
            }),
            proxy('/api2',{
                target:'http://localhost:5001',
                changeOrigin:true,
                pathRewrite:{'^/api2':''}
            })
        )
    }
3. 优点: 可以配置多个代理,可以灵活的控制请求是否走代理 
4. 缺点 : 配置繁琐, 前端请求资源时必须加前缀