react配置代理跨域

react配置代理跨域有两种方法
1.可以直接在package.son中直接配置
例如
如果后端只有一个端口可直接在package.json中写

"proxy":"http://后端地址/后端的ip+端口"

2.创建一个setupProxy.js
在其中写

import proxy from "http-proxy-middleware";


module.exports = function (App) {
    App.use(
        proxy('/api', {
            // 代理地址（后端的地址）
            target: '',
            // 设置服务器是否会收到hook，默认false
            ChangeOrigin: true,
            //重写请求路径，也就是将路径中的/api进行清楚
            pathRewrite: {
                '^/api': ''
            }
        }),
        proxy('/api', {
            // 代理地址（后端的地址）
            target: '',
            // 设置服务器是否会收到hook，默认false
            ChangeOrigin: true,
            //重写请求路径，也就是将路径中的/api进行清楚
            pathRewrite: {
                '^/api': ''
            }
        })
    )
}

切记,配置代理的文件夹名称必须要是setupProxy.js
因为webpack会自动将文件进行遍历识别到该文件名称时才会执行

为什么会出现跨域
最常见的是我本电脑上项目端口开的是8000而后端的数据端口是8001就会出现跨域，其实我像后端发送数据，后端会收到，也可以返回，但ajax会识别端口是否相同，如果不同则将数据屏蔽了，进而出现了跨域，而代理就是创建一个代理，通俗点来说也就是中间商，来进行传递和接收数据