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截图:

相关推荐
再学一点就睡1 小时前
手写 Promise 静态方法:从原理到实现
前端·javascript·面试
再学一点就睡2 小时前
前端必会:Promise 全解析,从原理到实战
前端·javascript·面试
前端工作日常2 小时前
我理解的eslint配置
前端·eslint
前端工作日常2 小时前
项目价值判断的核心标准
前端·程序员
90后的晨仔3 小时前
理解 Vue 的列表渲染:从传统 DOM 到响应式世界的演进
前端·vue.js
十盒半价3 小时前
React 牵手 Coze 工作流:打造高效开发魔法
react.js·coze·trae
OEC小胖胖3 小时前
性能优化(一):时间分片(Time Slicing):让你的应用在高负载下“永不卡顿”的秘密
前端·javascript·性能优化·web
烛阴4 小时前
ABS - Rhomb
前端·webgl
植物系青年4 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(下)
前端·低代码
植物系青年4 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(上)
前端·低代码