React 反向代理

一般在解决跨域问题时会进行代理的配置，无论是 React 还是 Vue 都是使用 Proxy 来实现。接下来来说一说 React 中怎么实现反向代理。

方式一

第一种方式是直接在 package.json 文件中配置 proxy 属性，但是这种方式只能配置一次，有局限性

"proxy":"https://xxx/api"

当进行接口请求时候，实际请求的地址会变为：https://xxx/api/getList

方式二

第二种方式可以配置多个代理，相当灵活一些。

在src目录下中，新建 setupProxy.js （React 会自动识别此文件）后进行配置，配置之后重启一下项目。

• 遇见带 api 前缀的请求，就会代理到 https://xxx/api
• 遇见带 api2 前缀的请求，就会代理到另外一个地址

需要使用到 createProxyMiddleware 中间件：

• npm install http-proxy-middleware
• npm i proxy

具体配置如下

const proxy = require('http-proxy-middleware')
module.exports = function(app){
    app.use(
        proxy.createProxyMiddleware('/api',{
            target:'https://xxx/api', 
            changeOrigin:true,
            pathRewrite:{'^/api':''}
        }),
        proxy.createProxyMiddleware('/api2',{...}})
    )
}