react跨域解决方案

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,希望对你有所帮助!让我们一起努力走向巅峰!