从零开始搭建自己的网站五:React前端axios请求封装和nginx代理配置

已于 2023-12-07 13:49:46 修改
阅读量259 收藏
点赞数
分类专栏： 管理系统Emt 文章标签： react.js nginx
于 2023-07-11 23:53:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq994877603/article/details/131671516
版权

1.axios封装

创建一个Axios实例，重写请求拦截器和响应拦截器

在请求拦截器中 将localstorage的token取出来，并添加进请求配置，这里添加的key和后端获取token的key需要一致

在响应拦截器中把token存下来，比如存到window.localstorage

2.nginx代理配置

前端端口：10009，API端口10008 

用nginx代理，监听80端口，如果是访问域名开头为emt486.top/emt 就转到10008转口，其它默认发转到10009端口

转到API端口需要配置跨域,附上大佬配置链接，配置过程非常详细

Nginx 轻松搞定跨域问题_公众号:方志朋的博客-CSDN博客

怎样才算高极
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-axios:React和Axios
03-12
react-axios:React和Axios
从零开始搭建一个react项目开发
08-28
主要介绍了从零开始搭建一个react项目开发,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
24.1React 中的 Axios 代理配置
qq_44438941的博客
04-02 364
跨域
React封装axios请求
weixin_42032770的博客
06-22 3973
因为最近在进行老系统用新框架改造，正好用到了react，就顺便整理了一下react中对axios进行封装的相关知识点和步骤。
react 封装请求axios，直接调用即可
最新发布
weixin_43452154的博客
04-19 1012
2、在文件request中创建api.ts和service.ts文件（默认ts格式类型）service.ts（axios请求封装）1、在src目录下创建文件request。api.ts（主要写api请求接口）需要全部项目调试的源码可以前往。3、在文件中写下封装代码。
使用Nginx反向代理，将React项目打包后部署到服务器的二级子目录
2202_75616310的博客
11-30 1626
，不管#字符后边的路径如何变化，请求的都是#字符之前的地址，可以理解为请求的资源路径一直都是“/”，相当于/#/后边请求的路径都是虚拟路径，而不是服务器的真实路径。但是，如果服务器有多个项目的话，我们就需要将代码部署到服务器根目录里边的子目录了，而放到子目录的话，想让页面顺利访问到文件，和我们使用的路由方式也有关系。我们上线一个项目的时候如果服务器上只有这一个项目的话可以直接将打包后的代码部署到服务器指定的根目录，然后直接上线看就可以看到，不用配置其他项。，路径中会携带一个#字符，请求的链接为“
React功能篇 - 封装网络请求库axios
R的博客
07-09 1486
React封装axios请求库1.创建 httpload.js 文件2.创建api文件夹,将以下代码放入index.js3.react页面中调用4.刷新refreshToken 代码 [非必须,根据具体需求使用] 1.创建 httpload.js 文件 import axios from 'axios'; import { message } from 'antd'; import NProgress fro.
史上最全的 axios 工具封装
weixin_38982591的博客
01-08 2804
npm使用国内淘宝镜像的方法 npm install -g cnpm --registry=https://registry.npm.taobao.org npm 导入axios 包 cnpm install axios -save 封装要点 统一的url配置 统一的api请求 request（请求）拦截器。例如：带上token等，设置请求头 respon （响应） 拦...
React项目跨域，以及axios的封装使用
qq_56894932的博客
01-10 3135
一，什么是跨域 由于浏览器的同源策略限制，当一个请求的URL的协议，域名，端口，三者之间有任意一个与当前页面url不同就会出现跨域 二，什么是协议，端口号，域名。 三，解决跨域 四，封装axios 五，调取接口
react-axios-http:react-axios-http
08-04
这是一款结合axios和react的封装请求库， 主要解决了请求调用处理的统一和接口的统一管理， 以及在项目中的接口便捷调用 使用方式 初始化 // ./http import http, { combineApi } from "react-axios-http" const ...
react + ts or vue + ts 通用axios封装的方法。
07-21
react + ts or vue + ts 通用axios封装的方法。 封装通用ts类型，封装通用requestMode.ts，统一存放api请求路径
Nginx代理axios请求以及注意事项详解
01-10
前言 近期写个小demo，因为用到某大厂的在线数据，接口做了跨域限制，所以利用Nginx代理来解决这些问题。 1. nginx.conf 配置信息 由于nginx.conf配置信息较多，本篇只关注跟axios和静态资源请求设置，顺便也将常见的一些配置项备注一下。具体设置如下： # 设定http服务器，利用它的反向代理功能提供负载均衡支持 http { #连接超时时间 keepalive_timeout 120; #gzip压缩开关及相关配置 gzip on; gzip_min_length 1k; gzip_buffers 4 32k; gzip_http_version
axios-react:React基于Axios的React的HTTP客户端组件
05-19
Axios React 用于带有子函数回调的React的HTTP客户端组件，可基于在渲染中创建异步请求。安装： 纱： $ yarn add axios-react npm： $ npm i -S axios-react现场示例：用法： import React from 'react' ;import ...
react配置代理
我的博客
03-17 1155
二、在 setupProxy.js（src目录下） 中配置。一、在package.json中配置。
React 封装的一些总结
GoldenaArcher的博客
11-12 535
总体上来说这次重构的效果还是挺好的，完成了：测试代码的添加虽然是从 redux 开始，不过我们终于开始写测试了……代码更加的模块化使用 redux 集中化数据这一部分其实也减少了一些重复调用的代码，毕竟数据和页面也存在 1-to-many 的情况单个页面开发速度提升 50%之前简单的页面实现周期大概是一周左右(5-6 天)，现在因为代码已经封装好了，所以实现周期提速到了 2-3 天现有的代码量大概优化了 50%+每个页面渲染本身优化了大概 40%左右。
react项目实战学习笔记-学习15-request封装
qq_41632427的博客
08-20 459
r
react中axios引用以及实例封装常见拦截器请求方式
刻痕
12-30 2860
react中axios引用以及实例封装常见拦截器请求方式
第十一章 React 封装自定义组件
Etc.End的博客
12-11 1456
自定义组件是指根据应用需求，自定义的组件。它们可以是有状态的或无状态的，可以接受props并返回JSX或null，并且可以包含生命周期方法、refs、context等等。自定义组件在React应用中非常常见，因为React的核心思想就是组件化。每一个React页面都是由一个或多个组件构成，组件是构建React应用程序的基石。它们可以封装可重用的UI组件，使代码更加模块化和可维护。自定义组件可以有很多用途。例如，它们可以创建可重用的UI组件，如按钮、表单、布局等。
react封装一个webScoket请求
apple_52225781的博客
07-23 274
react封装一个webScoket请求
react 封装axios
09-01
在React中封装axios可以通过创建一个通用的axios实例来实现。可以按照以下步骤进行操作： 1. 首先，安装axios库，可以通过运行`npm install axios`命令来安装。 2. 在你的项目中创建一个文件，比如`api.js`，用于封装axios请求。 3. 在`api.js`文件中引入axios库：`import axios from 'axios'`。 4. 创建一个axios实例：`const instance = axios.create({ baseURL: 'http://api.example.com' })`。这里的`baseURL`是你的API的基本URL，你可以根据实际情况进行修改。 5. 接下来，你可以在该实例上定义各种请求方法，比如`get`、`post`等：``` export const getArticleList = () => { return instance.get('/article/home/index') } ``` 6. 最后，你可以在你的React组件中引入这些封装好的请求方法，并使用它们来发送请求：``` import React, { useEffect } from 'react'; import { getArticleList } from './api'; const Home = () => { useEffect(() => { getArticleList().then(response => { console.log('get article response:', response); }).catch(error => { console.log('get response failed!'); }); }, []); return ( // 组件的内容 ); }; export default Home; ```这样，你就可以在React中封装axios并使用它来发送请求了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [react + ts or vue + ts 通用axios封装的方法。 ](https://download.csdn.net/download/qq_40661003/86247561)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【重点突破】—— React应用中封装axios(转)](https://blog.csdn.net/qq_34235864/article/details/113805369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值