2022-02-28 学习记录--React-解决跨域问题：配置代理

一、配置代理的方式1

在package.json中添加"proxy":"服务器地址"，举例如下：

然后修改 axios 发送网络请求的地址的端口号，如下图：

二、配置代理的方式2

在src里面新建一个文件：setupProxy.js，自定义内容举例如下：

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

module.exports = function(app) {
    
    
    app.use(
    	// 代理1
        proxy('/api1',{
    
     // 遇见/api1前缀的请求，就会触发该代理配置
            target: 'http://localhost:5000', // 请求转发给谁
            changeOrigin: true, // 控制服务器收到的请求头中Host字段的值，默认值是false
            pathRewrite:{
    
    '^/api1':''} // 重写请求路径【必需】
        }),
        // 代理2
        proxy('/api2',{
    
    
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite:{
    
    '^/api2':''}
        }),
    )
}

在对应 axios 发送网络请求的地址的端口号后面加上 /配置代理的名字，比如：/api1，见下图：

三、react脚手架配置代理总结

These are bilibili尚硅谷React学习视频的 学习笔记~