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

已于 2023-12-07 13:49:46 修改
阅读量289 收藏
点赞数
分类专栏： 管理系统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
    评论
专栏目录
云E办Springboot+vue——前端项目完整版（含源码）
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
手把手教你从零开始开发上线一个生产级别的 Java 小说系统
qq_33856597的博客
06-04 1011
PDManer 元数建模，是一款多操作系统开源免费的桌面版关系数据库模型建模工具，基于 ES6 + React + Electron + Java 构建，相对于 PowerDesigner，他具备界面简洁美观，操作简单，上手容易等特点。支持 Windows, Mac, Linux 等操作系统，也能够支持国产操作系统，能够支持的数据库如下：MySQL, PostgreSQL, Oracle, SQLServer等常见数据库支持达梦，GuassDB 等国产数据库。
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
React项目中请求接口的封装
weixin_34148508的博客
12-10 3643
封装目录中所包含的文件Api.js ApiIp.js ApiURL.js ApiIp.js文件的作用这个文件的作用主要是在开发环境和生产环境下调用不同的接口请求地址，生产环境下此文件的作用是动态 的获取浏览器中的地址进行拼装，便可以动态的获取地址，不需要写死//获取当前的URL中的地址，同时携带端口号,不携带http:// let projectAddrass = wind...
React封装Axios请求、响应拦截、封装Post、Get请求。
最新发布
zbl1340301274的博客
06-25 614
这里已经将封装好的请求方式抛出了，需要在入口文件里引用，设置为全局变量，你也可以在需要的地方按需引入，但我不太建议。响应拦截就是在你的接口返回数据后，拦截器会先获取，你可以判断是否正常或数据完好再把数据返回到发起请求的地方。如果你已经下载好了axios和cookie则需要引入，其中axios是必须的cookie不是。请求拦截就是在你的请求还没有发送之前，你可以对你的请求做一些修改。你添加了请求拦截器，则须使用自定义的请求，否则拦截器将没有意义。另一个标记的index.js则是下面会说到的入口文件。
React-请求配置封装
一个处女座的CV工程师
11-29 1061
1.如果没有引入axios npm install axios 在src文件下新建request_api.js文件 import axios from 'axios'; //对外提供的服务地址 const publicIp = process.env.NODE_ENV === 'development' ? 'https:baidu.com' : '' /** * 模块说明:有api_token的请求 */ export const request = (method,api,params,) =
从零开始搭建react项目--React-router使用/接口跨域处理/fetch请求封装
02-04 291
从零开始搭建react项目-React-router使用
react配置代理
我的博客
03-17 1194
二、在 setupProxy.js（src目录下） 中配置。一、在package.json中配置。
前端开发实习面经总结
xq66660821的博客
04-06 1325
面经一： 1. 拖拽实现列表排序 描述：有一个列表，列表里面有十条记录，每一行是一条记录。在每一个记录的后面进行一个拖页的动作，以此进行列表的排序。 思路：转载至https://blog.csdn.net/azuretodd/article/details/109973228 <li class="li_row" v-for="(item,index) in linkData " :key=index draggable="true" @dragstart="drag(
2020-03 前端技术汇总
鲨了泥的博客
06-10 681
2020/03/30 周一 #JSON数据转Blob后，怎么还原 在axios请求下载文件接口时，一般设置responseType: ‘blob’，文件返回正常就没问题，但后台如果处理文件或鉴权有问题，接口返回了包含错误信息的json格式数据，那样json数据也会转为Blob对象，而前端有必要将错误信息展示的，那怎么将Blob数据转JSON呢？下面来看看 let fileType = res.headers['content-type'] if (fileType.startsWith('applicati
前端面试题整理
newbalsh的博客
06-07 928
工厂模式是一种设计模式，目的是为了创建对象，它通常在类或类的静态方法中实现，有以下目的：当创建相似对象是执行重复操作当编译时，不知道具体类型的情况下，为工厂客户提供一个创建对象的接口//使用工厂方式创建一个对象//1.原料//2.加工 -- 对属性进行赋值//3.方法console.log("人物名称："+this.name);console.log("人物的性别："+this.sex);//4.加工结束,--输出返回return obj;//工厂模式的使用。
nginx上部署react项目的实例方法
09-29
今天小编就为大家分享一篇关于nginx上部署react项目的实例方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
React配置代理
weixin_63443072的博客
05-16 352
在package.json中追加如下配置："proxy":"http://localhost:5000"在src下创建配置文件：src/setupProxy.jssetupProxy.js文件 App.js文件
React功能篇 - 封装网络请求库axios
R的博客
07-09 1521
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.
react项目实战学习笔记-学习15-request封装
qq_41632427的博客
08-20 488
r
React中如何设置代理跨域请求数据
duansamve的博客
01-04 1145
方案一： //配置: package.json "proxy":"https://xxxx.com" 问题： 只能代理一个服务器 方案二： 利用客户端代理中间件(http-proxy-middleware)完成,官网给了新的使用方式，在src下新建文件setupProxy.js加下面代码，无需单独应用，webpack会自动引入文件。 npm install http-proxy-middleware -S 文件内容 //verion < 1.0版本 const proxy = r
react封装一个webScoket请求
apple_52225781的博客
07-23 312
react封装一个webScoket请求
React 入门 以及使用antd框架，并且封装分页组件、使用表格分页
weixin_46212682的博客
09-20 1808
React 入门 以及使用antd框架，并且封装分页组件、使用表格分页
react 封装axios请求
04-24
React 封装 Axios 请求可以通过创建一个自定义的 Hook 来实现。下面是一个简单的例子： ``` import { useState, useEffect } from "react"; import axios from "axios"; const useAxios = (url) => { const [data...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值