react在package.json里配置proxy的原因

最新推荐文章于 2024-03-08 19:36:02 发布
最新推荐文章于 2024-03-08 19:36:02 发布
阅读量3.3k 收藏 4
点赞数 2
分类专栏： 前端 node 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/just_do_it_123/article/details/108735854
版权
前端 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
node
4 篇文章 0 订阅
订阅专栏

以前单独使用webpack的时候，我们知道在开发过程中可以配置devServer里的proxy，从而访问后端提供的接口。react内部也是使用的webpack那么怎么去配置proxy呢，我在react的官网里并没有找到，没有办法在网上找了很久的资料终于找到了方法：在package.json里配置，可是为什么这样配置就可以让webpack知道这个proxy？
react提供了create-react-app来简化创建app的过程，但是也隐藏了很多的配置细节，通过package.json中scripts里的eject命令可以修改项目，将所有配置文件都暴露出来，运行完eject命令后，我们在package.json里可以看到:
在这里插入图片描述
进入到scripts/start.js里面：
在这里插入图片描述
在这里可以看到devServer使用了serverConfig，而在serverConfig里使用了proxyConfig，进一步跳转，可以看到
在这里插入图片描述
这里的proxySetting是来自于paths.appPackageJson里的proxy属性，再进一步跳转，终于找到了，这个proxy是来自于package.json里的proxy
在这里插入图片描述
done.

just_do_it_123
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何理解package.json中的proxy字段？
weixin_33717117的博客
05-16 2702
入职新公司以来，第一个月接手vue项目，第二个月接手angularjs项目，第三个月加入react重构项目。心生感叹：业务驱动式学习是一种高效率的学习方式，保持好奇心，在业务中快速成长！新项目中在package.json中有一个proxy字段，这是我从来没接触过的，因此就有了此文的诞生，我使用create-react-app 新建了一个...
react框架的学习和使用
最新发布
06-21
在package.json中追加如下配置 "proxy": "http://localhost:5000" 说明： 1.优点：配置简单，前端请求资源时可以不加任何前缀 2.缺点：不能配置多个代理 3.工作方式：上述方式配置代理，当请求了3000不存在的资源...
使用 package.json 配置代理解决 React 项目中的跨域请求问题
JudithHuang的博客
02-22 1016
当我们在开发前端应用时，经常会遇到跨域请求的问题。为了解决这个问题，我们可以通过配置代理来实现在开发环境中向后端服务器发送请求。在 React 项目中，我们可以使用文件中的proxy字段来配置代理。这个字段可以帮助我们将前端应用的请求转发到指定的后端服务器上，从而避免跨域请求的限制。下面是如何在在你的 React 项目中，找到文件并打开它。proxy在文件的顶层对象中添加一个名为proxy的字段，并将其值设置为你想要代理的后端服务器的基本 URL。
06_React配置代理proxy（实现跨域请求）
PrototypeOne的博客
05-11 1317
React配置代理proxy（实现跨域请求） 方法一：直接在package.json中设置proxy属性 我们可以在package.json中直接添加这样的字段"proxy": "http://172.16.136.249:8080" 这和Vue的配置有点不同，他好像不太需要过多的设置，而是简简单单的一个字符串即可。但他有个大缺点——不能配置多个代理。 下面的方法二就是解决这个问题 的，也是比较推荐使用的 方法二：建立setupProxy.js，注意必须是这个文件名 我们使用这个方法时，需要在项目中安装m
react proxy 报错
weixin_34034670的博客
04-17 401
react项目中，package.json中proxy的配置如下 "proxy": { "/api/rjwl": { "target": "http://47.94.142.215:8081", "changeOrigin": true } } 就会报这样的错误 When specified, "proxy" in packag...
React配置代理（proxy）
qq_63608386的博客
03-08 864
比如请求地址是 http://localhost:5000/api/index/index。假设地址是 http://localhost:5000/api/index/index。在package.json中，添加proxy配置项,之后所有的请求都会指向该地址。使用axios进行请求，而配置代理过程。但这种方法只能配置一次，也只有一个。然后就可以进行请求了。
大丽花：一个自以为是的React框架。 [重命名为pea.js]
02-04
大丽花[重命名为pea.js] 有关更...├── package.json├── src│ └── pages│ └── index.tsx└── tsconfig.json其他选择像素npx create-dahlia-app myappnpm npm init dahlia-app myapp纱yarn create dahlia
react axios 跨域访问一个或多个域名问题
08-19
首先，我们可以使用在 package.json 文件中配置 proxy 来实现跨域访问。例如： "proxy": "http://iot-demo-web-dev.autel.com" 这样，我们就可以在 React 项目中使用 Axios 发送请求到该域名下。 在使用 Axios 时...
React+Spring实现跨域问题的完美解决方法
08-27
针对这个问题，通常在`package.json`文件中添加`proxy`配置。例如，如果需要调用的API位于`http://api.xxxx.com`，可以在`proxy`字段下添加如下配置： ```json "proxy": "http://api.xxxx.com" ``` 这将使前端的...
react package.json 修改proxy进行前端跨域，通过修改homepage，更改打包路径
技术分享
05-09 2981
react脚手架create-react-app 创建项目使用，会生成reactreact-domreact-scripts 记录一下自己在package.json文件内的坑 1.homepage
React脚手架配置axios代理 （1.配置在package.json， 2.配置在setupProxy.js）
Allen的博客
11-19 983
React脚手架配置axios代理 （1.配置在package.json， 2.配置在setupProxy.js）
react（33）——在脚手架中引入axios，在package.json中配置“proxy“的作用
木子 旭的博客
03-10 1372
react在脚手架中如何引入axios 在终端中进入该脚手架 输入npm add axios 在想要使用axios的组件中import axios 在react脚手架中配置proxy有什么作用 使用脚手架react界面发送axios请求可能会遇到跨域问题。 配置proxy，值为想要访问的服务器端口。 在之后访问服务写URL地址时，可以直接写脚手架的地址。 （1）如果脚手架中找到了该文件，则返回脚手架中的文件。 （2）如果教授家中没有找到该文件，则去proxy所配置的路径中寻找文件，且能解决跨域的
react 关于 proxy 配置报错
weixin_44555663的博客
07-02 680
问题： 在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 脚手架配置跨域代理
web00_11的博客
05-28 281
方法1 在 package.json 文件中添加 proxy 节点 { "proxy": "需要代理到的 url（后端 url）" } 这个方法简单但不是很完美，而且只能代理一个 URL，交易使用方法2 方法2 在 src 文件夹下创建 setupProxy.js 文件 注意：这个文件里面得使用 commonjs 语法，不能使用 es6 语法 const proxy = require('http-proxy-middleware') // 这里通常是导出一个对象，在这里导出一个函数 modu
【react框架】一些零碎知识点的记录：proxy的代理配置、根元素、按需打包引入、异步组件、元素插入
庞囧的博客
07-24 1528
时，服务端接收请求并返回了相应数据，数据回来的时候也是走5000端口，那么react脚手架服务上的axios就会进行拦截，因为跨域了，我们就获取不到这次返回的数据。而代理服务器在脚手架服务上，所以对接前端工程服务器的端口也是3000，那么代理接收到的服务器相应数据就能完美的转交给react脚手架服务上了。由于设置了代理，所以脚手架服务请求的地址需要改为代理的地址，也就是同一个3000端口的地址，那么请求方法的url就从。的资源，找不到会给这个本地小代理，让它帮我们去请求远程服务器。
react配置多个跨域代理
no_name_left的博客
06-03 662
一、直接在package.json中配置跨域代理，只能配置一个 “proxy”: “http://172.16.0.234:8884” 在pakage.json文件中的proxy的值只能是一个字符串，若给proxy的值换成对象则会报错，所以配置多个不同的跨域代理需要其他方法 二、使用插件：http-proxy-middleware 安装插件 npm install http-proxy-middleware 或者 yarn add http-proxy-middleware 2. 使用 在src目录下创
React中配置代理的两种方法
m0_52223449的博客
11-09 2332
React中解决接口跨域问题
react—create-app。src引入目录外部文件冲突问题：Relative imports outside of src/ are not supported.
热门推荐
u010682792的博客
05-08 1万+
使用react—create-app构建的项目，当src文件夹下文件想引用src文件夹外文件因为官方限制问题会报以下错误。Module not found: You attempted to import ****** which falls outside of the project src/ directory. Relative imports outside of src/ are no...
react 项目中在开发时跨域问题的解决
浮生离梦的博客
06-27 3369
一、方案一 在使用 create-react-app 脚手架创建 react 项目的时候，在开发时进行接口访问的时候，会出现跨域问题。 解决方法是在 package.json 文件中增加如下配置，如下所示："proxy": "http://localhost:5000" // 配置你要请求的服务器地址 这一种方法只针对于低版本的，create-react-app 的版本低于 2.0 的时候可以在 package.json 增加 proxy 配置，proxy 可以是 object 类型。 二、方案二
proxy应该加在package.json的哪里，scripts里、dependencies里还是其它
07-14
`proxy` 字段应该添加在 `package.json` 文件的顶层，与 `scripts` 和 `dependencies` 平级。以下是一个示例的 `package.json` 文件结构： ```json { "name": "your-project", "version": "1.0.0", "description": "Your project description", "scripts": { "start": "react-scripts start" }, "dependencies": { "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "^3.4.3" }, "proxy": "http://10.13.5.25:8000" } ``` 在这个示例中，`proxy` 字段位于 `package.json` 的顶层，与 `scripts` 和 `dependencies` 平级。你可以将 `"http://10.13.5.25:8000"` 替换为你想要代理的目标地址。 请确保你的 `package.json` 文件结构正确，并将 `proxy` 字段添加在正确的位置，这样你的前端应用就会使用指定的代理进行请求转发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值