React脚手架配置服务器代理

一：配置服务器

const express = require('express')
const path = require('path')
const bodyPparser = require('body-parser')

const app = express()
app.use(bodyPparser.json())

const staticPath = path.join(__dirname,'..','/static')
app.use(express.static(staticPath))


const {userList,foodList} = require('../analoge_data')
app.get('/get_user_list',(req,res) => {
    // 采用jsonp解决跨域
    // let {callback = Function.prototype} = req.query
    let data = {
        code: 200,
        data: userList
    }
    // res.send(`${callback}(${JSON.stringify(data)})`)
    res.send(data)
})

app.get('/get_food_list',(req,res) => {
    // let {callback = Function.prototype} = req.query
    let data = {
        code: 200,
        data: foodList
    }
    // res.send(`${callback}(${JSON.stringify(data)})`)
    res.send(data)
})

app.post('/user_register',(req,res) => {
   let userGisterData =  req.body // 这个是前端传来的数据
   res.send({
       state: 200,
       msg: '提交成功',
       user_id: '100001'
   })
})
app.listen(8000,(err)=> {
    if (err) {
        console.log(err)
        return
    }
    console.log('成功启动服务http://localhost:8000')
})

服务器链接

二：服务器代理的配置

方式一：直接在package.json文件中直接追加proxy

"proxy": "http://localhost:8000"

注意：弊端就是只能配置一个代理服务器，如果一个项目中有多个服务器，就无法实现了。因此，就需要了第二种方式。

方式二：配置代理服务器文件setupProxy.js

在src文件下配置setupProxy.js文件

const proxy = require('http-proxy-middleware') // react脚手架下载的时候，就已经安装好了
module.exports = function (app) {
    app.use(
        proxy('/api1',{
            target: 'http://localhost:8000', // 请求转发给哪个服务器
            changeOrigin: true, // 控制服务器收到的响应头中Host字段的值
            pathRewrite: {'^/api1': ''}
        })
    )
}

注意：

• app.use()是可以有多个proxy，如果还有其他服务器代理，就可以接着写

proxy('/api1',{
            target: 'http://localhost:8000', // 请求转发给哪个服务器
            changeOrigin: true, // 控制服务器收到的响应头中Host字段的值
            pathRewrite: {'^/api1': ''}
        }),
 proxy('/api2',{
            target: 'http://localhost:8080', // 请求转发给哪个服务器
            changeOrigin: true, // 控制服务器收到的响应头中Host字段的值
            pathRewrite: {'^/api2': ''}
        })

• 方式二的请求url需要拼接标识符api1,api2等

三：在组件中调用接口

import React,{ Component } from "react";
import Https from 'axios'
// import UserList from 'UserList'
import './index.css'
export default class Main extends Component {

     getUserList = () => {
        Https.get('http://localhost:3000/api1/get_user_list').then(res => {
            console.log('获取用户数据1：',res)
        }).catch(err => {
            console.log('获取失败：',err)
        })
    }

    render() {
        return (
            <div className="module_main">
                {/* <UserList/> */}
                <button onClick={this.getUserList}>获取用户的数据列表</button>
            </div>
        )
    }
}