1.开发环境 :react+axios+element
2.电脑系统:windows10专业版
3.在使用react开发的过程中,我们会遇到跨域的问题,解决方法如下。
4.我使用的是 axios进行数据的交互,安装axios:
npm i axios --save
5.安装代理中间件(http-proxy-middleware),解决跨域
npm i http-proxy-middleware --save
6.在src下新建文件setupProxy.js加下面代码:
//verion < 1.0版本
const proxy = require('http-proxy-middleware'); //需要安装中间件
module.exports = function(app) {
app.use(
proxy("/api", {
target: 'https://xxx.com',
changeOrigin: true
})
);
app.use(
proxy("/v2", {
target: "https://xxx2.com",
changeOrigin: true
})
);
};
//verion > 1.0
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use('/api', createProxyMiddleware({
target: 'http://localhost:3000',
changeOrigin: true,
}));
app.use('/api2', createProxyMiddleware({
target: 'http://xxx.com',
changeOrigin: true,
pathRewrite: { //路径替换
'^/api2': '/api', // axios 访问/api2 == target + /api
}
}));
};
//注意:一般安装的版本都是大于1的,所以可以直接使用 >1 的解决方法
7.在react模板中添加如下代码:
componentWillMount(){ console.log(500); axios.post('/api/feng').then((res)=>{ console.log(res); }) }
8.效果如下:
9.本期的教程到了这里就结束啦,是不是很nice,希望对你有所帮助!让我们一起努力走向巅峰!