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

最新推荐文章于 2024-07-12 16:03:06 发布
最新推荐文章于 2024-07-12 16:03:06 发布
阅读量2.9k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44681533/article/details/105734457
版权
本文介绍了在React项目中，通过配置proxy代理来解决本地开发时请求接口的跨域问题。详细步骤包括在start.js配置文件引用package.json中的代理设置，添加http-proxy-middleware插件，创建setupProxy.js文件并编写相关代码，最后通过npm start重启服务使代理生效。
摘要由CSDN通过智能技术生成

需求来源

该项目用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元/天 解锁文章
Shawn Yu
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React+Spring实现跨域问题的完美解决方法
08-27
在React前端通过代理配置解决开发环境的跨域问题，在Spring后端通过拦截器处理生产环境的跨域请求。注意，这些设置仅适用于允许特定源的跨域访问，若需允许所有源，可将`Access-Control-Allow-Origin`设置为`*`，但...
react axios 跨域访问一个或多个域名问题
08-19
React Axios 跨域访问一个或多个域名问题是前端开发中的一种常见问题，该问题的解决方法有多种，本文将详细介绍 React Axios 跨域访问一个或多个域名问题的解决方法。 React Axios 跨域访问一个域名 首先，我们...
react和vue配置本地代理
weixin_30295091的博客
08-23 234
　　React 　　在react中配置开发环境下的本地代理相对比较简单，直接在package.json文件中修改即可。 　　但是这样做有其局限性，如果开发中代理多个接口的时候将无法满足需求，我们需要的是下面这种的能够代理多个接口的请求方式 proxy('/back', { target: 'http://172.20.1.148:8082', chang...
react在本地代理请求json文件返回接口数据开发
weixin_34185512的博客
07-16 3979
在平时开发过程中，很多时候前后端并行开发，暂时无法调取后台接口，此时我们很多时候可能会采取本地伪数据方式，或者采用mock数据，我以前大多采用这种方式，最近来新公司这边，发现这便是利用node本地代理方式来进行接口模拟调用，然后数据通过本地json文件读取返回，个人认为这种方式最能体现业务代码执行过程中的众多逻辑，所以稍加研究，记录一下。...
在react项目中解决跨域本地代理没有同域名问题
最新发布
yuanluyun9781的博客
07-12 167
在react项目中解决跨域本地代理没有同域名问题。报错Access to XMLHttpRequest ..........
react链接本地接口测试前后端跨域解决详细步骤，fiddler使用步骤
一点光辉的博客
12-20 2638
可能大家的文件结构不一样，但是大致都是差不多的 第一步：在react中配置访问本地后台的链接 第二步：使用Fiddler工具来配置端口映射 以下是完整的地址链接，可下载直接安装 链接: https://pan.baidu.com/s/1Hrwm8iTDlshGBlFKoAwoGQ 提取码: hc4b  安装成功之后，会有一颗树的按钮 第三步：注意这里的本地ip不能使用127...
create-react-app 中设置反向代理、项目打包资源引入路径设置及 map 文件
ddr66288的博客
06-13 894
1、配置反向代理 （1）porxy 配置一个代理 　　修改package.json文件 "proxy":"http://teng.com/website/web", （2）proxy配置多个代理 　　注意：若create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置即可， 配置成如下 "name": ...
react 关于 proxy 配置报错
weixin_44555663的博客
07-02 687
问题： 在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
react跨域http-proxy-middleware配置完接口访问报404
01-03
原因是虽然开启了代理，但是请求的url里多了一个/api/，这时我们需要把多余的/api/去掉，需要使用pathRewrite参数，把/api/设置成空，这时就可以正常跨域访问了 配置文件： const { createProxyMiddleware } = ...
详解Springboot+React项目跨域访问问题
08-26
总结起来，Springboot+React项目中的跨域问题可以通过CORS过滤器或者前端代理服务器来解决。理解并正确实施这些解决方案，有助于构建安全且高效的前后端分离应用。在实际开发中，应根据项目需求和环境选择合适的方法...
解决 springboot跨域请求问题
05-11
Nginx可以配置为将前端和后端的请求路由到相应的服务器，从而隐藏真实的服务器地址，同时也解决了跨域问题。在Nginx配置文件中，你可以添加一个新的location块来代理后端服务。例如： ```nginx location / { ...
本地开发跨域问题, proxy解决
lert707的博客
10-10 9732
设置代理解决跨域 在vue-cli搭建的项目中有一个config文件夹，里有一个index.js文件，里面的dev大概是这样： dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // Various Dev Server settings...
【react框架】一些零碎知识点的记录：proxy的代理配置、根元素、按需打包引入、异步组件、元素插入
庞囧的博客
07-24 1550
时，服务端接收请求并返回了相应数据，数据回来的时候也是走5000端口，那么react脚手架服务上的axios就会进行拦截，因为跨域了，我们就获取不到这次返回的数据。而代理服务器在脚手架服务上，所以对接前端工程服务器的端口也是3000，那么代理接收到的服务器相应数据就能完美的转交给react脚手架服务上了。由于设置了代理，所以脚手架服务请求的地址需要改为代理的地址，也就是同一个3000端口的地址，那么请求方法的url就从。的资源，找不到会给这个本地小代理，让它帮我们去请求远程服务器。
SIGINT、SIGKILL和SIGTERM的区别
衣乌安、随笔
11-16 1626
  首先要知道的是SIGINT、SIGKILL和SIGTERM代表的时一种信号。什么是信号？信号是一个 POSIX 内部通信系统：发送通知给进程，以告知其发生的事件。（windows系统不支持）。 这三个个信号都是用来终止进程的。 三者之间的区别 SIGINT 信号值为2，当用户按Ctrl+C时触发默认行为会终止当前进程，支持自定义覆盖其默认行为（利用trap命令捕获对应信号自定义处理逻辑）; kill -2 <process_id> SIGTERM 信号值为15，kill命令的默认值，终止进
react在package.json里配置proxy的原因
just_do_it_123的博客
09-22 3385
以前单独使用webpack的时候，我们知道在开发过程中可以配置devServer里的proxy，从而访问后端提供的接口。react内部也是使用的webpack那么怎么去配置proxy呢，我在react的官网里并没有找到，没有办法在网上找了很久的资料终于找到了方法：在package.json里配置，可是为什么这样配置就可以让webpack知道这个proxy？ react提供了create-react-app来简化创建app的过程，但是也隐藏了很多的配置细节，通过package.json中scripts里的ej
npm 设置和取消代理的方法
悦涵仙子的技术笔记本
05-21 1026
设置代理 npm config set proxy=http://127.0.0.1:8087 npm config set registry=http://registry.npmjs.org 关于http 经过上面设置使用了http开头的源，因此不需要设http_proxy了，否则还要加一句 npm config set https-proxy http://server:port 代理用户名和密码 npm config set proxy http://username:password@
React Typescript音乐播放器项目笔记：5、create-react-app搭建代理（二）
weixin_38405133的博客
02-13 402
项目地址：https://github.com/BUPTlhuanyu/react-music-lhy create-react-app搭建代理（二） create-react-app搭建代理（一）介绍了如何通过devServer.before自定义路由从而搭建代理，本文给出另外一种方法。经过npm run eject之后配置代理，create-react-app用的是webpack-dev-se...
create-react-app脚手架构建react项目后配置proxy
潜行IT的博客
08-02 6228
使用create-react-app创建项目后，在本地开发时 ，配置请求转发是常见的。配置转发之后我们在本地环境就能请求到服务器的接口。  使用以下命令生成本地webpack配置文件 npm run eject 该命令会将配置文件暴露到scripts目录下 然后看scripts目录下的start.js源码　发现 const compiler = createCompiler(we...
一种方便的跨域开发解决方案
weixin_34186931的博客
03-21 197
现在越来越多的 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、付费专栏及课程。

余额充值