React学习记录之前端跨域配置代理

场景

前端代码

import React,{ Component }  from 'react'
import axios from 'axios'
class Hello extends Component{
  getStudnetInfo() {
    axios({
      url: 'http://127.0.0.1:3001/student'
    }).then(res=>{
      console.log(res);
    })
  }
  render(h) {
    return <button onClick={ this.getStudnetInfo }>获取学生数据</button>
  }
}
export default Hello

服务端代码

const express = require('express')
const app = express()
const port = 3001
app.use((req,res,next)=>{
  console.log('访问服务器成功')
  next()
})
app.get('/student', (req, res) => {
  const students = [
    {
      stuId:1,
      stuName: '猿小申'
    },
    {
      stuId:2,
      stuName: 'yaunxiaoshen'
    }
  ]
  res.send(students)
})
app.listen(port, () => console.log(`Example app listening on port port!`))

产生的结果

解释：http://localhost:3000/ 访问 http://localhost:3001，由于端口号的不同,产生了跨域，浏览器限制了数据的接收，并不是没有发送出去，而是服务器已经收到了，浏览器因为同源策略的原因拦截了数据。所以就出现了代理解决跨域。

react配置代理

1. 简单的方法，直接在package.json中配置即可
   
   
   

注意：1. 配置完成，要重启编译。2. localhost和127.0.0.1域名不同也会跨域，这里要注意。

2. 第二种方法
   脚手架src目录下新建 setupProxy.js 文件（不可改），采用command语法进行编写代码

const proxy = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
    proxy('/api1', {
      target: 'http://localhost:3001', // 代理转发的地址
      changeOrigin: true, // 让服务端知道从哪发出来的
      pathRewrite: {'^/api1': ''} // 将api1变成空
    })
  )
}

api1路径：当访问的接口路径中有api1时才会代理转发，pathRewrite将接口路径重写，去掉这api1，访问后端正常的接口。