• React 使用 Proxy 代理(create-react-app)


    在create-react-app 中配置proxy代理

    proxy,默认为NULL,类型为URL,一个为了发送http请求的代理
    在平时开发时,尤其前后端分离时,需要假数据来进行模拟请求,这个时候就需要proxy代理来处理

    create-react-app < 2.0

    package.json 中配置

    "proxy":{
       "/api/**":{
          "target":"https://easymock.spiritling.pub/",
          "changeOrigin": true
        }
    }
    

    create-react-app > 2.0

    package.json 中配置(不推荐)

    "proxy": "https://easymock.spiritling.pub/",
    

    配置文件 /src/setupProxy.js (推荐)

    create-react-app 解包后,可以在 config 文件夹下找到配置

    config/path.js 中存在 proxySetup: resolveApp('src/setupProxy.js'),

    proxySetup 是只在 webpackDevServer.config.js 文件中使用,也就是说只在开发时使用

    所以,可以在 /src/setupProxy.js 中配置

    首先安装 http-proxy-middleware

    npm install http-proxy-middleware -D
    

    然后文件配置

    const proxy = require('http-proxy-middleware');
    module.exports = function (app) {
        app.use(
            '/api/v1/',
            proxy({
                target : 'https://easymock.spiritling.pub/',
                changeOrigin : true,  // 设置跨域请求
                PathRewrite : {
                    '^/api/v1' : '' // 将/api/v1 变为 ''
                }
            })
        );
    };
    

    使用例子

    01

    const proxy = require('http-proxy-middleware');
    module.exports = function (app) {
        app.use(
            '/api/v1/',
            proxy({
                target : 'https://easymock.spiritling.pub/',
                changeOrigin : true
            })
        );
    };
    

    游览器中请求为 https://example.com/api/v1/login

    则经过代理后可以转为 https://easymock.spiritling.pub/api/v1/login

    02

    const proxy = require('http-proxy-middleware');
    module.exports = function (app) {
        app.use(
            '/api/v1/',
            proxy({
                target : 'https://easymock.spiritling.pub/',
                changeOrigin : true,
                PathRewrite : {
                    '^/api/v1' : ''
                }
            })
        );
    };
    

    游览器中请求为 https://example.com/api/v1/login

    则经过代理后可以转为 https://easymock.spiritling.pub/login

    create-react-app官方-Proxying API Requests in Development

    http-proxy-middleware 新版本 ≧ 1.0.0

    在新版本大于等于 1.0.0 时使用会出现如下问题

    proxy is not a function
    

    也就是说 http-proxy-middleware 或者 setupProxy 会出现报错 proxy is not a function

    所以需要使用新版本的写法才可以

    const { createProxyMiddleware } = require('http-proxy-middleware');
    
    module.exports = function (app) {
        app.use(createProxyMiddleware('/api/v1', {
            target : 'https://easymock.spiritling.pub',
            changeOrigin : true,
            ws: true,
            pathRewrite : {
                '^/api/v1' : ''
            },
        }));
    };
    
  • 相关阅读:
    【风马一族_php】PHP与Mysql建立连接
    【风马一族_php】NO1_用php发出一声 Hi
    【风马一族_php】NO0_搭建web服务器
    【风马一族_mysql】mysql基本指令
    wnmp环境搭建
    appach2.4 + php7 +mysql5.7.14 配置
    常用样式
    jquery 格式化系统时间
    使用插件实现一般处理程序导出excel
    bootstrap分页
  • 原文地址:https://www.cnblogs.com/spirit-ling/p/13327917.html
Copyright © 2020-2023  润新知