当前位置:首页 > Web开发 > 正文

middleware反向代办代理跨域

2024-03-31 Web开发

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反向代办代理跨域

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30620.html