【重点突破】—— react使用http-proxy-middleware反向代理跨域
2021-04-20 22:26
标签：一个 ios java 发送 第一步 重点 mount 使用 change create-react-app脚手架低于2.0版本时候，可以使用对象类型 最新的create-react-app脚手架2.0版本以上只能配置string类型 官网给了新的使用方式，在src下新建文件 注意：1. 用typescript文件名结尾.ts会导致文件不生效！！！切记.js文件结尾 2. package.json内容发生了修改，必须重启应用，才能生效。 第一步 安装 http-proxy-middleware 顺便安装一下 axios ，不用也可以，用fetch也一样。 第二步 npm run eject 命令 配置暴露出来 第三步 src下创建一个 setupProxy.js文件 第四步 需要发送请求的地方 使用 注：转载自乡村里的一股清流博客 【重点突破】—— react使用http-proxy-middleware反向代理跨域 标签：一个 ios java 发送 第一步 重点 mount 使用 change 原文地址：https://www.cnblogs.com/ljq66/p/12257070.html"proxy": {
"/api": {
"target": "http://localhost:5000",
"changeOrigin": true
}
}
"proxy": "http://localhost:5000"
setupProxy.js加下面代码，无需单独应用，webpack会自动引入文件。 npm install http-proxy-middleware
npm install axios
npm run eject
or
yarn eject
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
});
}
上一篇：JS事件高级
文章标题：【重点突破】—— react使用http-proxy-middleware反向代理跨域
文章链接：http://soscw.com/index.php/essay/77322.html