React中的反向代理(React脚手架),解决跨域访问问题。

*请怀着一颗感恩的心,my good time。

一、当前脚手架项目下安装 

npm i http-proxy-middleware --save -dev

二、创建文件 ./src/setupProxy.js

解释:在src文件夹 下面创建 setupProxy.js 文件

三、编辑 setupProxy.js 文件文件内容

const { createProxyMiddleware } = require('http-proxy-middleware')
// react 跨域  (反向代理)
module.exports = function (app) {
  // /api 可以更改为自己想要的名字 和下边的^/api要一样
  app.use(createProxyMiddleware('/api', {
    // 请求基础地址
    target: 'http://localhost:19998',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api": ""
    }
  }));
}

四、重新启动项目即可

*感谢您的收看

本文来自于这个博客地址  https://blog.csdn.net/qq_35629054/article/details/106934648?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162618658516780274196335%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162618658516780274196335&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-106934648.pc_search_result_control_group&utm_term=react%E4%B8%AD%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86&spm=1018.2226.3001.4187

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值