react代理设置安装http-proxy-middleware， axios请求, fetch请求

第一 代理设置安装http-proxy-middleware

1 安装依赖

安装http-proxy-middleware
yarn add http-proxy-middleware --save
或
npm install http-proxy-middleware --save

2 在src下建立setupProxy.js文件

0.x.x版本的引用方式

const proxy = require("http-proxy-middleware");
module.exports = function(app) {
  app.use(
    proxy("/api", {
      target: "http://localhost:4000/",
      changeOrigin: true, // needed for virtual hosted sites
      ws: true, // proxy websockets
      pathRewrite: {
        "^/api": ""
      }
    })
  );
};

1.0.0版本的引用方式

const { createProxyMiddleware } = require('http-proxy-middleware');
  
module.exports = function (app) {
  app.use(
    createProxyMiddleware(
      '/api',
      {
        target: "http://localhost:4000",
        changeOrigin: true,
        pathRewrite: {
          '/api': ''
        }
      }
    )
  );
};

3 在start.js中引入代理文件后重启

require('../src/setupProxy')(devServer);

 

二 axios请求

先引入axios依赖

npm install axios --save

 

axios data数据会直接回来，使用data1.data就可以取到返回的数据

我这里没有封装axios所以直接import使用

 

三 fetch请求

首先引入依赖

npm install node-fetch --save

 

如果按照axios请求的话会发现请求返回response里面有返回数据但是打印的data并没有

因为fetch返回的response需要解析,一般使用的是json方法

解析后返回一个promise,数据已经返回了。

 

经过json（）方法解析返回的一个promise， 这个时候data还是无法拿到，所以需要再处理一下

然后就请求完成了

关于fetch可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

 

 

 

加油！！！！！！！！！！！！！！