zoukankan      html  css  js  c++  java
  • create-react-app 构建的项目使用代理 proxy

    1. 正常运行 npm run eject (前三个步骤可省略,最好的是按照第四步操作)

    2. create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置, 配置成如下:

    "proxy":{
       "/fans/**":{
          "target":"https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
          "changeOrigin": true
        }
      }
    
    

    3. create-react-app 的版本高于 2.0 版本的时候在 package.json 只能配置 string 类型, 配置成如下:

     "proxy": "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
    

    4. 更好的配置,建立 src/setupProxy.js 文件,npm 安装 install http-proxy-middleware , 配置成如下:(可配置多个代理)

    const proxy = require("http-proxy-middleware");
     
    module.exports = function(app) {
      app.use(
        proxy("/base/**", {
          target: "http://45.32.15.21:8090/",
          changeOrigin: true
        })
      );
      app.use(
        proxy("/fans/**", {
          target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
          changeOrigin: true
        })
      );
    };
    

    5. 参考链接

  • 相关阅读:
    LintCode 17.子集
    JS时间操作
    Ajax总结
    Ajax请求文件下载操作失败的原因和解决办法
    遍历Map的几种方式
    java获取文件大小的方法
    Ajax详细介绍
    第31课
    30-React JSX IN DEPTH
    28-React state提升、组件组合或继承
  • 原文地址:https://www.cnblogs.com/zhourongcode/p/10104366.html
Copyright © 2011-2022 走看看