react跨域解决方案

react跨域解决方案

1.开发环境:react+axios+element
2.电脑系统:windows10专业版
3.在使用react开发的过程中,我们总是会遇到跨域的问题,下面我来分享一下,在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,让我们一起努力走向巅峰!