React中配置proxy代理解决本地开发请求接口的跨域问题

最新推荐文章于 2025-05-13 22:24:02 发布
原创 最新推荐文章于 2025-05-13 22:24:02 发布 · 3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在React项目中，通过配置proxy代理来解决本地开发时请求接口的跨域问题。详细步骤包括在start.js配置文件引用package.json中的代理设置，添加http-proxy-middleware插件，创建setupProxy.js文件并编写相关代码，最后通过npm start重启服务使代理生效。

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

需求来源

该项目用react框架写的，已经到项目尾声，开始部署的阶段，因为之前请求的接口都是拼死的IP地址，并且配置了chrome浏览器，才解决了跨域的问题。现在想部署在云上，所以想用代理来解决跨域问题。
代理的话在项目中的scripts/start.js配置文件中，（该文件就是配置npm start 相关操作的配置文件）

const proxySetting = require(paths.appPackageJson).proxy;

有这样一行代码，大致的意思就是引用package.json中的代理配置。
所以在package.json中增加proxy参数。

"proxy":"http://1.1.1.1",``
最低0.47元/天 解锁文章

200万优质内容无限畅学
Shawn Yu
关注
＜前端人自己的跨域＞React-ajax以及setupProxy配置代理
Coding and studying
06-29 2792
安装axios输入命令后，可以在文件中查看是否安装完成如图出现axios：版本号，代表安装完成，可以使用～例如，我们需要点击按钮向服务器发送请求：首先我们需要使用 搭建一个服务器 就像这样，服务器搭建好了，并且服务一旦开启就会被use中间件监听到，打印出“有人请求服务器1了”；开启服务：（或者）服务器开启在5000端口…由于浏览器地址栏默认发送的就是get请求，我们可以在地址栏输入：按下回车键，查看服务是否可以成功返回数据：可以看出，服务器可以正常返回数据。那么现在就是发送服务获取学生数据了：在中： 尝试点
react和vue配置本地代理
weixin_30295091的博客
08-23 286
　　React 　　在react中配置开发环境下的本地代理相对比较简单，直接在package.json文件中修改即可。 　　但是这样做有其局限性，如果开发中代理多个接口的时候将无法满足需求，我们需要的是下面这种的能够代理多个接口的请求方式 proxy('/back', { target: 'http://172.20.1.148:8082', chang...
react在本地代理请求json文件返回接口数据开发
weixin_34185512的博客
07-16 4056
在平时开发过程中，很多时候前后端并行开发，暂时无法调取后台接口，此时我们很多时候可能会采取本地伪数据方式，或者采用mock数据，我以前大多采用这种方式，最近来新公司这边，发现这便是利用node本地代理方式来进行接口模拟调用，然后数据通过本地json文件读取返回，个人认为这种方式最能体现业务代码执行过程中的众多逻辑，所以稍加研究，记录一下。...
前端开发避坑指南：React 代理配置常见问题与解决方案
最新发布
weixin_46560512的博客
05-13 1092
前端开发避坑指南：React 代理配置常见问题与解决方案 一、为什么需要配置代理？ 二、使用 create-react-app 默认配置代理 三、使用 http-proxy-middleware 配置复杂代理 四、高级代理配置 五、生产环境中的代理配置
react链接本地接口测试前后端跨域解决详细步骤，fiddler使用步骤
一点光辉的博客
12-20 2760
可能大家的文件结构不一样，但是大致都是差不多的 第一步：在react中配置访问本地后台的链接 第二步：使用Fiddler工具来配置端口映射 以下是完整的地址链接，可下载直接安装 链接: https://pan.baidu.com/s/1Hrwm8iTDlshGBlFKoAwoGQ 提取码: hc4b  安装成功之后，会有一颗树的按钮 第三步：注意这里的本地ip不能使用127...
React如何通过代理进行本地调测
qq_15509267的博客
03-18 800
由于在react进行本地调测时，访问后端接口会遇见跨域问题，所以我们需要通过代理的方式来解决跨域问题（服务端之间通信不存在跨域问题）本记录使用的"react": “^18.2.0”
create-react-app 中设置反向代理、项目打包资源引入路径设置及 map 文件
ddr66288的博客
06-13 975
1、配置反向代理 （1）porxy 配置一个代理 　　修改package.json文件 "proxy":"http://teng.com/website/web", （2）proxy配置多个代理 　　注意：若create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置即可， 配置成如下 "name": ...
react跨域http-proxy-middleware配置完接口访问报404
01-03
原因是虽然开启了代理，但是请求的url里多了一个/api/，这时我们需要把多余的/api/去掉，需要使用pathRewrite参数，把/api/设置成空，这时就可以正常跨域访问了 配置文件： const { createProxyMiddleware } = ...
react中做proxy代理解决options的问题
chenqk_123的专栏
11-16 1516
在日常的开发中，为了快速开发，一般都是前后端分离，那么在开发过程中联合调试就成了必不可少的事情了。 在做react项目时，为了方便快捷的开发，一般不会将前端代码编译后再放到服务器上同后台一起调试。常用的方式就是在本地就可以直接调试对接接口，那么使用create-react-app做react快速开发下，就会出现本地起了一个服务，然后通过这个服务区访问服务器上的资源，这样就会产生跨域的问题，时如果...
react dva api调用，proxy代理配置解决跨域问题
qq_34297738的博客
03-12 1036
dva api调用，proxy代理配置解决跨域问题 proxy代理解决跨域问题 （一）什么是跨域 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。当协议、子域名、主域名、端口号中 任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。 同源就是指“协议+域名+端口”都一样，就算有两个不同域名指向同一个IP地址也不能是同源。同源策略只有在浏览器中存在，服务器中确不存在，所以遇到需要跨域请求的地址将其转发服务器后委托服务器去请求即可。 找到.webpackrc文件进行配置
react axios配置代理（proxy)，解决本地开发时的跨域问题
qq_36529240的博客
02-22 1043
本文基于 react 17.x 版本 安装axios npm install axios 1.输入命令 npm run eject 运行报错的话点这里 2.打开 config 文件夹下的 webpackDevServer.config.js 文件 3.进行搜索 proxy , 将代码改成 proxy: { // ‘/api’可以更改其他比如‘/ps’ "/api": { target: "http://lochost:3000", // 后台服务地址以及端口号
react 关于 proxy 配置报错
weixin_44555663的博客
07-02 794
问题： 在package.json 中配置proxy时出现了proxy is not a function 的错误，查看资料后发现是版本更新后不兼容。 解决办法： 安装http-proxy-middleware npm install http-proxy-middleware --save 在src中新建一个setupProxy.js文件，写入 const {createProxyMiddleware} = require('http-proxy-middleware'); module.ex
本地开发跨域问题, proxy解决
lert707的博客
10-10 9822
设置代理解决跨域 在vue-cli搭建的项目中有一个config文件夹，里有一个index.js文件，里面的dev大概是这样： dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // Various Dev Server settings...
React配置代理proxy解决跨域问题
weixin_55560445的博客
12-07 780
一、在package.json中直接设置proxy 和Vue不同，React是在package.json文件中使用proxy配置 注意： create-react-app脚手架低于2.0版本时候，可以使用对象类型 "proxy":{ "/api/**":{ "target":"http://192.168.8.134:8080", ...
【react框架】一些零碎知识点的记录：proxy的代理配置、根元素、按需打包引入、异步组件、元素插入
庞囧的博客
07-24 1749
时，服务端接收请求并返回了相应数据，数据回来的时候也是走5000端口，那么react脚手架服务上的axios就会进行拦截，因为跨域了，我们就获取不到这次返回的数据。而代理服务器在脚手架服务上，所以对接前端工程服务器的端口也是3000，那么代理接收到的服务器相应数据就能完美的转交给react脚手架服务上了。由于设置了代理，所以脚手架服务请求的地址需要改为代理的地址，也就是同一个3000端口的地址，那么请求方法的url就从。的资源，找不到会给这个本地小代理，让它帮我们去请求远程服务器。
SIGINT、SIGKILL和SIGTERM的区别
衣乌安、随笔
11-16 2091
  首先要知道的是SIGINT、SIGKILL和SIGTERM代表的时一种信号。什么是信号？信号是一个 POSIX 内部通信系统：发送通知给进程，以告知其发生的事件。（windows系统不支持）。 这三个个信号都是用来终止进程的。 三者之间的区别 SIGINT 信号值为2，当用户按Ctrl+C时触发默认行为会终止当前进程，支持自定义覆盖其默认行为（利用trap命令捕获对应信号自定义处理逻辑）; kill -2 <process_id> SIGTERM 信号值为15，kill命令的默认值，终止进
React配置代理服务器的5种方法
一步一个脚印，踏实努力，向着目标前进
08-08 3899
以下是五种在React项目中配置代理服务器的方法的使用场景和优缺点：使用使用场景：适用于大多数React项目，简单易用。优点：配置简单，易于理解和维护。缺点：需要手动创建文件，并且需要安装额外的中间件。使用的使用场景：适用于大多数React项目，简单易用。优点：配置简单，易于理解和维护。缺点：需要手动创建文件，并且需要安装额外的中间件。使用使用场景：适用于较旧的React项目，或者对中间件的旧版语法有要求的项目。优点：配置简单，易于理解和维护。
在react项目中解决跨域本地代理没有同域名问题
yuanluyun9781的博客
07-12 309
在react项目中解决跨域本地代理没有同域名问题。报错Access to XMLHttpRequest ..........
一种方便的跨域开发解决方案
weixin_34186931的博客
03-21 239
现在越来越多的 Web 项目都采取前后端分离的开发方式，也就是在开发过程中前端工程运行在一个 node server 上，同时提供 REST API 的后端工程作为独立的服务运行在另一个 server 上，这样前后端通过 HTTP 请求进行通信的时候就会遇到跨域的问题，跨域是怎么一回事大家应该都了解，这里就不再赘述。以往解决跨域问题比较常用的方法就是给服务端配置 CORS，但是这种方式会带来一些...
封装axios 配置proxy代理解决跨域
07-16
要在封装的Axios配置中添加proxy代理以解决跨域问题，你可以按照以下步骤进行操作： 1. 在项目的根目录下创建一个 `vue.config.js` 文件（如果是Vue项目），或者在根目录下的 `package.json` 文件中添加一个 `proxy...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值