• create-react-app 构建的项目使用代理 proxy 解决跨域请求


    1. 正常运行 npm run eject 暴露项目的配置文件 (前三个步骤可省略,最好的是按照第四步操作)

      在config/webpackDevServer.config文件下,大概在104行

    1     proxy: {
    2       '/api': {
    3         target: 'https://i.news.qq.com/trpc.qqnews_web.pc_base_srv.base_http_proxy',
    4         changeOrigin: true,
    5         pathRewrite: {
    6           '^/api': ''
    7         }
    8       }
    9     }

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

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

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

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

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

     1 const proxy = require("http-proxy-middleware");
     2  
     3 module.exports = function(app) {
     4   app.use(
     5     proxy("/base/**", {
     6       target: "http://45.32.15.21:8090/",
     7       changeOrigin: true
     8     })
     9   );
    10   app.use(
    11     proxy("/fans/**", {
    12       target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
    13       changeOrigin: true
    14     })
    15   );
    16 };
  • 相关阅读:
    【bzoj2588】Count on a tree
    【bzoj4205】卡牌配对
    【bzoj1502】月下柠檬树
    【learning】快速沃尔什变换FWT
    【bzoj3672】购票
    bzoj1402:[HAOI2008]硬币购物
    bzoj1090:[SCOI2003]字符串折叠
    bzoj1260[CQOI2007]涂色paint
    2016.08.07计算几何总结测试day2
    2016.08.06计算几何总结测试day1
  • 原文地址:https://www.cnblogs.com/shun1015/p/13747302.html
Copyright © 2020-2023  润新知