react 实现proxy代理配置,使用setupProxy.js文件发起请求

21 篇文章 0 订阅
15 篇文章 0 订阅

1.安装http-proxy-middleware,会生成config和scripts文件夹,
config/path.js中存在 proxySetup: resolveApp(‘src/setupProxy.js’)proxySetup是在webpackDevServer.config.js
在这里插入图片描述

npm install http-proxy-middleware -D

2.暴露配置文件

npm run eject

3.在src下面新建setupProxy.js文件

const {
    createProxyMiddleware
} = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(createProxyMiddleware('/api', {
        target: 'http://m.kugou.com?json=true',/*这里写自己的代理地址*/
        changeOrigin: true,
        ws: true,
        pathRewrite: {
            '^/api': ''
        },
    }));
};

3.在scripts/start.js文件中,加上下面的代码,路径是setupProxy文件的路径,(这里我添加之后,注释掉,一样是可以请求的,所以不是很明白这个步骤)

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

在这里插入图片描述
4.下载axios,使用代理请求

npm install axios -s

引入

import axios from 'axios'

发起请求

  qinqiu = () => {
        console.log(123)
        axios({
            url: 'api/mytable',//不用引入,直接在api后面接接口
            method: 'get',
            data: {}
        }).then(data => {
            console.log(data)
        }).catch(err => {
            console.log(err)
        })
       
    }
  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值