码迷,mamicode.com
首页 > Web开发 > 详细

【重点突破】—— react使用http-proxy-middleware反向代理跨域

时间:2020-02-03 20:41:23      阅读:1052      评论:0      收藏:0      [点我收藏+]

标签:一个   ios   java   发送   第一步   重点   mount   使用   change   

create-react-app脚手架低于2.0版本时候,可以使用对象类型

"proxy": {
    "/api": {
      "target": "http://localhost:5000",
      "changeOrigin": true
    }
}

最新的create-react-app脚手架2.0版本以上只能配置string类型

"proxy": "http://localhost:5000"

官网给了新的使用方式,在src下新建文件setupProxy.js加下面代码,无需单独应用,webpack会自动引入文件。 

注意:1. 用typescript文件名结尾.ts会导致文件不生效!!!切记.js文件结尾

       2.  package.json内容发生了修改,必须重启应用,才能生效。

 

第一步 安装 http-proxy-middleware

npm install http-proxy-middleware  

顺便安装一下 axios ,不用也可以,用fetch也一样。

npm install axios

  

第二步 npm run eject 命令 配置暴露出来

npm run eject 
or
yarn eject

  

第三步 src下创建一个 setupProxy.js文件

const proxy = require("http-proxy-middleware");

// console.log(1);
module.exports = function(app) {
      app.use(
           proxy("/api", {
                 target: "http://m.kugou.com?json=true",
                 changeOrigin: true
           })
      );
      // app.use(
         // proxy("/fans/**", {
                 // target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
                 // changeOrigin: true
         // })
     // );
};   

技术图片 

 

第四步 需要发送请求的地方 使用

async componentDidMount(){
     let data = await axios.get(‘/api?json=true‘);
     let {data:{data:d,banner}} = data;

     let arr = [...banner,...banner];
     this.setState({
          iw:this.refs.banner.offsetWidth,
          arr,
          data:d
     });
}

 注:转载自乡村里的一股清流博客

【重点突破】—— react使用http-proxy-middleware反向代理跨域

标签:一个   ios   java   发送   第一步   重点   mount   使用   change   

原文地址:https://www.cnblogs.com/ljq66/p/12257070.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!