react使用 http-proxy-middleware解决跨域问题

简介:react使用 http-proxy-middleware解决跨域问题

第一步 安装 http-proxy-middleware

npm install http-proxy-middleware
#顺便安装一下 axios ,不用也可以,用fetch也一样。
npm install axios

第二步 npm run eject 命令 配置暴露出来

npm run eject    

or
yarn eject

第三步 src下创建一个 setupProxy.js文件

项目中需要请求的的url: https://mall.jingcailvtu.org:9443/home/data

  • setupProxy.js中添加以下内容:
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
    // 可配置多个代理
    app.use(
        proxy("/api", { // 在项目中可以使用/api来代替"https://mall.jingcailvtu.org:9443"
            target: "https://mall.jingcailvtu.org:9443", // 源url
            changeOrigin: true, //改变源
            pathRewrite: {
                '^/api': "https://mall.jingcailvtu.org:9443" //路径重写
            }
        }),

    );
  // app.use(
  //   proxy("/fans/**", {
  //     target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
  //     changeOrigin: true
  //   })
  // );
};
  • index.js中添加

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

  • 使用axios请求数据时直接使用/api代替url:

async reqHomeData(mallId) {

        // 执行异步ajax请求
        const result = await ajax('/api/home/data', {}, {"mtype": mallId}, 'POST');
        if(result.status===0) {
            const data = result.data;
            console.log(data)
        } else {
            const msg = result.msg;
            console.log(msg)
        }
    }

推荐阅读

目录