16.9.0版react跨域代理的方法

本文介绍如何使用http-proxy-middleware在项目中设置代理,包括安装步骤、配置文件的创建及具体写法,实现本地开发环境与后端服务器的无缝对接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、安装http-proxy-middleware

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

2、创建一个setupProxy.js文件,在src目录,src/setupProxy.js

例如之前的配置

"proxy": {
  "/api": {
    "target": "http://localhost: 3000/"
    }
}

setupProxy.js文件里则这样写

const proxy = require('http-proxy-middleware')
 
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost: 3000/' }))
}

完整的写法

app.use(proxy('/api', { 
target: 'https://localhost: 3000/',
changeOrigin:true,
pathRewrite: {
            "^/api": "/"
        }
}))
React前端项目中遇到问题时,通常通过服务器端的反向代理(Reverse Proxy)技术来解决。反向代理是一种网络架构模式,它允许客户端请求直接发送到目标服务,而不是直接访问原始服务器。以下是设置React应用反向代理的基本步骤: 1. **安装依赖**:如果你使用的是Node.js和Express作为后端服务器,首先需要安装`express`和`http-proxy-middleware`库来处理代理。 ```bash npm install express http-proxy-middleware ``` 2. **配置Express**: 在你的服务器入口文件(如`server.js`或`api.js`)中,添加反向代理中间件。例如: ```javascript const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); // 使用通配符(*)匹配所有路径 app.use( '/api', // 指定代理前缀 createProxyMiddleware({ target: 'https://api.example.com', // 目标API地址 changeOrigin: true, // 允许源请求 pathRewrite: { '^/api': '' } // 重写路径,去掉'/api' }) ); // 启动服务器 app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 3. **前端更新**:在React组件里,你可以继续像平常那样向`/api`路径发送GET、POST等请求,浏览器会自动通过代理转发到指定的目标API。 4. **测试验证**:重启你的服务器,然后在React应用的开发者工具 Network 面板检查请求,应该能看到它们都经过了代理
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值