webpack proxy axios create-react-app

最新推荐文章于 2024-05-13 09:00:00 发布
最新推荐文章于 2024-05-13 09:00:00 发布
阅读量3k 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuojianhai88/article/details/80111551
版权

当我们使用create-react-app创建项目后，在本地开发完成之后 ，肯定会遇到和服务端交互的问题,这时候配置请求转发是常见的。那么我们配置本地环境请求到服务器的接口。


 1 确保你自己已经使用 npm run eject 命令，这个是生成本地webpack配置文件

2>package.json中配置如下代码

"proxy": {
"/*": {
"target": "http://192.168.8.168:8081", //这里配置你要请求的服务端地址
"changeOrigin": true
}
}

配置完成之后，就能使用了。

在配置完成之后遇到个小问题，

axios 设置的baseURL 也设置成 服务器的地址了，导致请求不成功。

这点一定要是自己本机的地址, 例如我本机地址是 http://localhost:3000

======================================================================================

一>axios 配置的baseURL


2>package.json文件


3 axios 封装的请求


zhuojh_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react_home:这是一个react得demo脚手架项目，包含react16+redux+antd+webpack4+react-router4+sassless+axios+proxy技术栈
05-14
react_home 这是一个react的脚手架项目，其中包含着当前最新得脚手架配置方式，技术技术栈包括react16+antd+margaret...react_home_base：之前的react-router版本,请移步 更新日志 2020.07.09 加入格式化规范prettier，
vue+axios+webpack配置跨域（axios配置）
where_slr的博客
08-08 959
什么是跨域？ 浏览器有一个叫做同源策略的东西。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 同源策略规定了如果两个页面的协议、域名、端口中任意一个不相等，就认为两个页面具有不相同的源 两个不同源的页面资源交互会受到浏览器的同源策略限制，也就出现了我们说的跨域问题。 配置proxyTable解决跨域问题 我们使用vue-cli...
React 使用 Proxy 代理（create-react-app）
m0_64697285的博客
10-12 2460
proxy，默认为NULL，类型为URL，一个为了发送http请求的代理 在平时开发时，尤其前后端分离时，需要假数据来进行模拟请求，这个时候就需要。所以，可以在 /src/setupProxy.js 中配置。在新版本大于等于 1.0.0 时使用会出现如下问题。package.json 中配置（不推荐）文件中使用，也就是说只在开发时使用。package.json 中配置。所以需要使用新版本的写法才可以。则经过代理后可以转为。则经过代理后可以转为。
create-react-app创建的项目如何修改webpack配置
最新发布
luxigaola的博客
05-13 939
craco是 “Create React App Configuration Override” 的缩写，它是一个用于扩展和覆盖 Create React App（CRA）默认配置的工具。Create React App 是 Facebook 提供的一个流行的脚手架工具，用于快速初始化和构建React Web应用程序，特点是开箱即用并且有一套固定的配置集。
webpack proxy + axios请求
Viry_Hu的博客
03-12 737
记录下： proxy: { "/v1": { target: "https://easy-mock.com/mock/5.........cae50/example", changeOrigin: true, // 跨域 pathRewrite: { "^/v1": "" // 实际请求路径不含v1字段...
React配置代理服务器的5种方法
一步一个脚印，踏实努力，向着目标前进
08-08 3628
以下是五种在React项目中配置代理服务器的方法的使用场景和优缺点：使用使用场景：适用于大多数React项目，简单易用。优点：配置简单，易于理解和维护。缺点：需要手动创建文件，并且需要安装额外的中间件。使用的使用场景：适用于大多数React项目，简单易用。优点：配置简单，易于理解和维护。缺点：需要手动创建文件，并且需要安装额外的中间件。使用使用场景：适用于较旧的React项目，或者对中间件的旧版语法有要求的项目。优点：配置简单，易于理解和维护。
React配置代理的5种方法
一步一个脚印，踏实努力，向着目标前进
08-26 3647
使用场景：适用于使用create-react-app创建的React项目，特别是小型项目或快速原型开发。优点：配置简单，无需额外安装依赖，适合快速开发和简单项目。缺点：功能相对较少，只能配置一个代理。使用场景：适用于需要更灵活的代理配置，可以根据需求配置多个代理的中等规模项目。优点：配置灵活，可以根据需求配置多个代理，支持更多的选项和自定义功能。缺点：需要额外安装依赖，相对于create-react-app的代理配置略复杂。
TypeScript-React-Starter：基于typescript和react的全家桶建造的一个项目
02-03
TypeScript-React-Starter 结合了react的全家桶建造的一个项目 运行 # 开发环境 npm run start # http://localhost:3000 # 打包 npm run build # 发版 npm run deploy
npm-cors-proxy:NPM注册表的Cors代理
05-15
axios.get('http://localhost:9090/package/react', { headers: { 'Accept': 'application/json', } }).then(response => { console.log(response.data); }); ``` 在这个例子中，前端应用向`...
webpack-learning:webpack4、react16 脚手架
05-06
这是一群热爱前端的同学，为了提升平时的开发效率，经过一番精心调研而诞生的一款基于 React + Webpack的前端项目脚手架。 该项目则是站在业务层的角度，对该 SDK 进行较为通用性的封装。 为什么会有这个项目？ 以前...
Course-Application-with-React-and-Springboot
03-27
4. Proxy配置：在React的开发环境中，可以通过proxy配置文件映射API请求，解决跨域问题。 5. Build打包：React应用通过Webpack等工具编译打包，生成静态资源，部署到Spring Boot应用的静态资源目录。 总结，本课程...
react---配置代理
maidu_xbd的博客
06-12 3078
方式一：在package.json中添加proxy【 "proxy":"http://localhost:5000" 】创建代理配置文件，在src下创建配置文件：src/setupProxy.js。案例代码【App.jsx】
22、react 中的 Axios 代理配置
大家好，我是 ed.
09-20 1146
package.json 实现跨域配置配置简单，前端请求资源师可以不加任何前缀。不能配置多个代理。优先匹配前端资源。setupProxy.js 实现跨域配置可以配置多个代理，可以灵活的控制请求是否走代理。配置繁琐，前端请求资源时也必须加前缀。完成，今天就先到这里吧。
【react框架】一些零碎知识点的记录：proxy的代理配置、根元素、按需打包引入、异步组件、元素插入
庞囧的博客
07-24 1504
时，服务端接收请求并返回了相应数据，数据回来的时候也是走5000端口，那么react脚手架服务上的axios就会进行拦截，因为跨域了，我们就获取不到这次返回的数据。而代理服务器在脚手架服务上，所以对接前端工程服务器的端口也是3000，那么代理接收到的服务器相应数据就能完美的转交给react脚手架服务上了。由于设置了代理，所以脚手架服务请求的地址需要改为代理的地址，也就是同一个3000端口的地址，那么请求方法的url就从。的资源，找不到会给这个本地小代理，让它帮我们去请求远程服务器。
React create-react-app 里配置代理（解决跨域）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-17 2518
其实 cra里给了个简单的配置代理 就是在package.json里加上proxy就行了。修改时需要 npm start重新运行一下，要不然可能不生效。proxy只能以 http:// 或https://开头 否则会报：示例：比如后端给的完整地址如下：这一段是相同的地址（也就是所有接口都是这个前缀），根据你的接口来定。然后使用即可 比如 axios url直接请求就行代码如下：request就是axios 只是我又封装了一层。
React配置代理（proxy）
qq_63608386的博客
03-08 827
比如请求地址是 http://localhost:5000/api/index/index。假设地址是 http://localhost:5000/api/index/index。在package.json中，添加proxy配置项,之后所有的请求都会指向该地址。使用axios进行请求，而配置代理过程。但这种方法只能配置一次，也只有一个。然后就可以进行请求了。
create-react-app 配置 二次封装axios 和反向代理
weixin_57156917的博客
09-02 449
1.安装axios npm install axios --save 2.在src里新建一个api文件，并在里面创建index.js和request.js index.js里面的代码如下： import { Service } from "./request"; export function searchCar(config){ const params=new URLSearchParams() params.append('page',config.page).
create-react-app 构建的项目中配置proxy
zlq_CSDN的博客
05-29 846
前言： 目前项目开发中大都采用的是完全前后端分离开发模式，各自独立进行开发，虽然最后前后端都会部署到同一台服务器上，但在开发过程中前后需要进行联调，这个过程难免会遇到跨域问题。 解决跨域问题： 使用 react 脚手架 create-react-app 搭建react基础项目。 运行 npm run eject 展开项目中的详细配置 注意：项目中只能执行一次，展开后不可恢复； 如果项目需要相关配置文件，建议刚开始执行。 create-react-app 版本低于 2.0 时，可以直接在 packa
React使用axios配置代理
qq_38721353的博客
01-20 1108
一、配置原因 前端页面的端口号为3000，请求的服务器的端口号也得为3000。如果服务器的端口号为5000，就会出现跨域问题。 请求可以过去，但是响应回不来。为了解决这种问题，就要配置代理。 二、配置代理 代理的端口号和前端的端口号是一样的，前端代码开启后，会运行一个小的代理服务器。跨域问题是因为ajax引起的，所以端口号为3000的代理服务器可以收到来自端口号为5000的服务器的response,进而转发给前端。 方法1、package.json中配置’proxy’ 1）在文件中配置’proxy‘
create-react-app react 打包太慢
05-17
如果您使用的是 create-react-app 这个脚手架工具，那么默认的打包工具是 webpack。那么可以尝试以下几种方法来加速打包过程： 1. 使用 yarn 代替 npm yarn 比 npm 更快，因此使用 yarn 可以加速安装依赖的过程。可以使用以下命令来安装 yarn： ``` npm install -g yarn ``` 然后使用以下命令来创建一个新的 react 项目： ``` yarn create react-app my-app ``` 2. 使用缓存 在打包过程中，webpack 会将打包过的文件缓存起来，下次打包时会直接使用缓存文件，从而加快打包速度。可以在 webpack 的配置文件中配置 cache 参数： ``` module.exports = { // ... cache: true, // ... } ``` 3. 使用多核 CPU 在打包过程中，webpack 默认只使用一个 CPU 核心。可以通过以下命令来让 webpack 使用多个 CPU 核心： ``` webpack --parallel ``` 或者在 webpack 的配置文件中配置 parallel 参数： ``` module.exports = { // ... parallel: true, // ... } ``` 4. 使用 externals 如果你的项目依赖了一些外部库，可以通过 externals 参数来让 webpack 不打包这些库，从而减少打包时间。可以在 webpack 的配置文件中配置 externals 参数： ``` module.exports = { // ... externals: { react: 'React', 'react-dom': 'ReactDOM', }, // ... } ``` 以上是几种加速 create-react-app 打包的方法。希望能对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值