React create-react-app 里配置代理(解决跨域)

配置代理:

creact-react-app v5

当然不是v5 下面的方法也适用。

方式一:package.json里配置

其实 cra里给了个简单的配置代理 就是在package.json里加上proxy就行了。

修改时需要 npm start重新运行一下,要不然可能不生效。

proxy只能以 http:// 或https://开头 否则会报:
When "proxy" is specified in package.json it must start with either http:// or https://:

示例:

比如后端给的完整地址如下:

http://10.16.xx.xxx:8080/fund_diag/fund_home/select_by_fund

这一段是相同的地址(也就是所有接口都是这个前缀),根据你的接口来定。

javascript 复制代码
"proxy": "http://10.16.xx.xx:8080/fund_diag"

然后使用即可 比如 axios url直接请求就行代码如下:

request就是axios 只是我又封装了一层。

javascript 复制代码
   // axios.get(url, { params })
    request.get("/fund_home/select_by_fund?fund=1001").then(res=>{
      console.log(res);
    })

然后启动项目就可以看到请求成功了(不配置proxy是成功不了的,因为跨域了)。

network截图:

方式二:http-proxy-middleware 配置代理

1.安装 http-proxy-middleware

powershell 复制代码
npm install --save http-proxy-middleware

2.在src下新建 setupProxy.js 文件名必须是这个 然后配置一下即可。

javascript 复制代码
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'http://10.16.xx.xxx:8080/fund_diag', //代理的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''  // 将请求路径中的 "/api" 替换为 ""
        }
      })
    )
  };

axios使用/api/xx 即可走代理:

javascript 复制代码
    // axios.get(url, { params })
    request.get("/api/fund_home/select_by_fund?fund=1001").then(res=>{
      console.log(res);
    })

示例:

比如后端给的完整地址如下:

http://10.16.xx.xxx:8080/fund_diag/fund_home/select_by_fund

http://10.16.xx.xxx:8080/fund_diag这段是接口的前缀,也就是每个接口都有这段。所以 我target 配置为 :http://10.16.xx.xxx:8080/fund_diag

当然 具体需需要怎么配置,根据你的接口来定

network截图:

相关推荐
sunbyte1 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库4 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端4 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED4 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程5 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常5 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程