React中，设置代理跨域的方法总结

用户9914333

发布于 2022-07-22 14:31:01

1.4K0

发布于 2022-07-22 14:31:01

文章被收录于专栏：bug收集

今天主要和大家分享下，在 react 中"如何进行代理跨域"的方法

针对 create-react-app 脚手架

1、create-react-app脚手架低于2.0版本时

直接在 package.json 下配置

"proxy": "http://api.xxxx.com"

或者如果创建多个域，该如何设置 proxy

"proxy":{
   "/api":{
      "target":"http://localhost:8888",
      "changeOrigin": true,
        pathRewrite: {
                '^/api': '',
            }
    }
}

2、create-react-app脚手架高于2.0版本时

因create-react-app脚手架2.0版本以上只能配置string类型，

所以package.json 中只能配置一个跨域信息，如下：

"proxy": "http://m.kugo.com",

如果创建多个域，就不能写成对象了去实现了。那怎么办？

最好的方式可以通过 middleware 中间件进行配置（可以配置多个代理）

先安装下， install http-proxy-middleware

然后，src 目录下创建一个 setupProxy.js 文件

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:8888/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '',
            }
        })
    );
    app.use(
        '/img',
        createProxyMiddleware({
            target: 'http://localhost:9999/upload/',
            changeOrigin: true,
            pathRewrite: {
                '^/img': '',
            }
        })
    );
};

注意：

一定要写 pathRewrite ，不写没有效果

不需要做任何关联，只要文件叫 setupProxy.js 就好

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-04-24，如有侵权请联系 cloudcommunity@tencent.com 删除

react