Proxy代理前后，Httpheader 的变化

解决Vite中RestAPI跨域Session一致性问题
原创 已于 2023-07-17 16:08:25 修改 · 440 阅读 · 0 ·
CC 4.0 BY-SA版权
创作源自于MyFreeIT
文章标签：

#Proxy #vue.js #vite

于 2023-07-17 16:06:59 首次发布
通过在Vite.config中配置Proxy服务器，将/rest路径代理到SpringBoot应用的API地址，启用changeOrigin选项，以处理跨域请求。文章讨论了代理前后的JSESSIONID变化，显示代理有助于保持Session的一致性。

 Vite.config 配置Proxy服务器, 解决Rest API 访问SpringBoot接口时，跨域的Session一致性。

import { defineConfig, loadEnv } from 'vite'



export default defineConfig({
  server: {
    proxy: {
      '/rest': {
        target: loadEnv('', process.cwd()).VITE_API_URL,
        changeOrigin: true
      }
    }
  },

代理前

JSESSIONID=DA97DE3807A569A2F5524E8834434086; Path=/; HttpOnly

JSESSIONID=08433F457E2AA361D9E01391DEB56A3A; Path=/; HttpOnly

代理后

JSESSIONID=0DD0C41655082C91F91A3FCD2F8550AA

JSESSIONID=0DD0C41655082C91F91A3FCD2F8550AA

简易爬虫实践：http协议请求代理proxy、header
CoberOJ_的博客
05-06 1269
http协议请求代理proxy，header 直入主题： 请求proxy开源代码：https://github.com/Python3WebSpider/ProxyPool，按照说明启动即可，配置成功后，访问http://127.0.0.1:5555/random可以返回一个随机proxy地址 http请求模拟，配置随机proxy即可，建议也配置一个随机header，避免被封 import...
HttpClient安全验证、header设置、代理proxy设置
哎呀美呔小丸子
08-31 2378
目前市面上接口测试工具有很多，例如: POSTMAN、SOAPUI、JMETER、LoadRunder等，无论工具多么强大，也只能满足接口项目的部分测试需求，能做到完全贴合项目，实现定制化的接口测试，还是需要自主研发才能实现，下面就需要引入可实现小规模订制作用的HttpClient，现在HttpClient的最新版本为HttpClient 5.0（20190824） 第一步：使用HttpClie...
代理地址情况下获取request header中的cookie值
yuhan___的博客
12-13 2164
1、 在我们用代理地址获取接口数据时，无法获取到request header中cookie的值（客户端暂存服务端的信息），可以使用以下方法将后台cookie的值获取到。 // 数据接口put asyncpostDa(){ constdata=this.ruleForm; document.cookie="gr_user=admin"; document.cookie= "gr_remember=16f4f90d67...
vite 在proxy代理中更改headers
老司机的后备箱
01-14 4251
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Vue3项目（由Vite构建）中通过代理解决跨域问题（什么是跨域、代理规则详解、代理举例、实现代理的原理、代理规则的工作机制、为什么直接运行vite指令报错，而运行npm run dev指令却正常)
聂可以的博客
05-20 1万+
Vue3项目（由Vite构建）中通过代理解决跨域问题（什么是跨域、代理规则详解、代理举例、实现代理的原理、代理规则的工作机制、为什么直接运行vite指令报错，而运行npm run dev指令却正常)
前端小结：反向代理 - http-proxy
m0_37120609的博客
11-06 6529
1、需求 　　前后端分离项目中，需要使用反向代理，已解决跨域访问问题，在这里需要了解正向代理、反向代理等概念， 2、正向代理        正向代理比较好理解，类似于一个跳板，用来代替客户访问外部资源。   例如：      A向C借钱，由于一些情况不能直接向C借钱，于是A想了一个办法，他让B去向C借钱，这样B就代替A向C借钱，A就得到了C的钱，C并不知道A的存在，B就充当了A的代理...
【rust-grpc-proxy】基于rust的，gRPC动态代理，无需proto文件自动http转gRPC
qq_25490573的博客
02-02 2364
沟通服务间接口内容(尤其是前后端接口)，是非常让人头疼的事。极其容易扯皮。接口文档写起来也很痛苦，每个字段的改动都需要及时更新，否则就会出问题。服务端通信如果用rpc通信的话，一般会有proto或者thrift文件。这个文件很长时间里被我们当成接口文档用，用着用着发现，真tm好用。既减少了扯皮，还不用写接口文档。那可不可以用grpc和前端通信那，一开始我们的做法是用grpc-gateway。把grpc的接口映射成http接口。但这种方式需要编译gateway的pb文件，对服务也是有侵入的。
Glang+Vue实现RESTful API+前后端分离，Nginx反向代理解决跨域问题（一）
weixin_42560249的博客
03-02 1650
标题Glang+Vue实现RESTful API+前后端分离，Nginx反向代理解决跨域问题 概念引入 前后端分离架构如下图，后端只负责动态提供数据，而前端存放静态文件，使得后端服务器不必每次都返回一整个HTML页面，节省了时间开销和资源开销，提高了整个网站系统的性能。 　　RESTful架构，是目前最流行的一种互联网软件架构。它结构清晰、符合标准、易于理解、扩展方便，所以正得到越来越多网站的采用...
代理IP在后端开发中的应用与后端工程师的角色
这家伙很懒，什么都没有留下
11-21 1253
在数字化时代，网络技术的飞速发展极大地推动了各行各业的发展。本文将深入探讨代理IP在后端开发中的应用以及后端工程师的角色，并通过具体案例和代码，为新手朋友提供有价值的参考。同时，也要注意在使用代理IP时面临的挑战，确保代理IP的合理合法使用，从而充分发挥其优势，为后端系统的稳定高效运行保驾护航。同时，在与外部服务交互时，代理IP可以防止外部服务获取后端系统的真实信息，保障系统的安全性和隐私性。后端工程师是IT公司中一个重要的工作岗位，他们不仅确保后端服务器的正常运转，还负责与前端服务器工作人员的交流。
Nginx变更HTTP2配置过程记录
企业实战系列集 ●●● https://ximenjianxue.blog.youkuaiyun.com
08-26 6462
背景 最近，业务平台受客户反馈，登录响应很慢，达到50s左右，虽然平台带宽又1G，但是用户上传文件到平台的速率只有40Kb/s左右，业务正常使用受影响严重。 经与研发侧同事沟通，考虑采用http2，因http2再nginx中相较于http1具备较大优势： 环境检查 相关资料表明：openssl的版本必须在1.0.2e及以上、nginx的版本必须在1.9.5以上 如果没有安装的话： ./configure --prefix=/usr/local/nginx --with-openssl=../openss
vue3 vite和ngnix代理转发header区分大小写
breakwhile的博客
10-20 557
res.header.authorization 将大写转化为小写，ngnix不做处理,res.header.Authorization。今天遇到一个比较坑的问题，后台设置头部信息 res.header.Authorization，vite代理后头部获取为。
一文搞懂HTTPProxy丨含基础、高级路由、服务韧性
亨利笔记
06-06 3591
题图摄于北京奥利匹克中心【编者推荐】本文选自马哥教育 CEO马永亮老师撰写的《Kubernetes进阶实战（第2版）》，第十三章 13.3.3-13.3.5 节。马老师曾经到我司给云原生...
接口测试-header头部详解
热门推荐
Gina61的博客
12-14 1万+
一、什么是header header：标头 (header) 是服务器以HTTP协议传HTML资料到浏览器前所送出的字串，在标头与 HTML 文件之间尚需空一行分隔。 -----百度百科 header是发送请求时携带的头部信息。通常一些鉴权的信息：authentication/cookie、响应的数据格式：content-type等等的设置。当然响应的数据也会返回一些头部信息。 二、header头部参数对应含义 1、Request header： User-Agent：告诉Http服务器，客户端使用的操作系
Nginx的proxy_set_header设置问题
王景清的博客
01-19 1万+
Host 直接访问 浏览器直接访问服务器 结果：浏览器访问IP+端口 通过Nginx代理访问(不做任何配置) 通过Nginx反向代理，不配置proxy_set_header。 server { listen 8090; server_name _; location / { proxy_pass http://172.31.5.0:5000; } } 结果：proxy_pass+代理端口，即代理IP+代理端口。 $host 设置proxy_set_hea
Nginx 代理时herder参数无法传递 ，header的那么中包含 _ 时
qq_31876557的博客
11-16 744
Nginx 代理时herder参数无法传递 nginx默认request的header的那么中包含’_’时，会自动忽略掉。 对header有所限制，下划线（_）不支持。 方法一： 不用下划线 把下划线_改成其他的，如access_token改成access-token 方法二： 从根本解除nginx的限制 解决方法是：在nginx里的nginx.conf配置文件中的http部分中添加如下配...
在Vue3中使用vite配置proxy实现跨域请求
Eiwen的技术生涯
04-08 912
"Authorization": "bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAi" //设置请求报头。target: 'http://www.baidu.com/api/', // 目标服务器地址。changeOrigin: true, // 启用代理时，改变源地址。相当于请求了后端服务接口：http://www.baidu.com/api/page。
Vue配置proxy
欢迎访问我的主页：https://www.bookbook.cc
01-05 1万+
文章目录后台前台配置 proxy请求示例请求结果 后台 const express = require('express') const app = new express() app.get('/api/news', (req, res) => { // res.setHeader("Access-Control-Allow-Origin", '*') // res.setHeader("Access-Control-Allow-Headers", '*') //响应所有请求 // r
http proxy原理
congdiku5262的博客
11-20 344
本文内容主要来自http://www.fenesky.com/blog/2014/07/25/how-http-tunnel-works.html，在其基础上稍加整理。 connect方法 h...
Http 请求头中的 Proxy-Connection
thlzjfefe的博客
11-07 948
同样，响应中的 Keep-Alive 也会被代理原样返给浏览器，同时代理还会傻等服务器关闭连接——实际上，服务端已经按照 Keep-Alive 指示保持了连接，即使数据回传完成，也不会关闭连接。但是要升级所有老旧的代理也不是件简单的事，所以浏览器厂商和代理实现者协商了一个变通的方案：首先，显式给浏览器设置代理后，浏览器会把请求头中的 Connection 替换为 Proxy-Connetion。通过上面的内容可以看到，浏览器对代理请求头的修改，都是为了尽可能的兼容网络中各种不规范的中转设备，使网络更健壮。
去掉代理api
最新发布
04-18
<think>好的，我现在需要帮助用户解决如何移除Nginx中的反向代理API配置的问题。首先，我要确认用户的具体需求。用户提到参考了之前的引用，但可能更关心如何删除现有的反向代理设置，特别是与API相关的部分。 首先，回顾用户提供的引用内容，引用[1]是关于安装和配置Nginx的步骤，引用[2]涉及proxy_cache_key的语法，引用[3]解释了反向代理的基本概念和配置步骤。但用户现在的问题是关于移除反向代理配置，尤其是API部分，所以可能需要忽略部分引用，专注于配置文件的修改。 接下来，我需要回忆Nginx的配置文件结构。通常，反向代理的设置是在server块中的location指令里定义的，尤其是当用户提到API代理规则时，可能类似于location /api/这样的路径。因此，移除这些配置需要用户找到对应的location块并删除或注释掉。 用户可能的情况是，之前为了将API请求转发到后端服务器，配置了类似location /api/ { proxy_pass http://backend; }，现在需要取消这个代理，让请求直接由Nginx处理或返回其他响应。因此，我需要指导用户如何定位这些配置，并安全地移除它们，而不会影响其他部分。 还需要考虑用户的操作系统，虽然用户提到Windows/Linux通用，但配置文件的位置可能不同，比如Linux通常在/etc/nginx/，而Windows可能在安装目录下的conf/。用户可能需要编辑nginx.conf或包含在其中的其他配置文件，比如sites-available/中的文件。 另外，用户可能担心在修改配置后如何测试和重新加载配置，而不会导致服务中断。因此，需要提醒用户使用nginx -t测试语法，然后使用nginx -s reload重新加载配置。 可能的误区是用户可能删除了必要的配置，或者没有正确注释掉相关部分，导致语法错误。因此，步骤中需要强调备份配置文件的重要性，以及逐步验证每一步的正确性。 最后，用户可能还想知道移除后的验证方法，比如通过curl或浏览器访问API路径，检查是否不再被代理，而是返回预期的响应，比如静态文件或404错误。因此，在回答中应该包含验证步骤，确保用户确认配置已生效。 总结步骤：定位配置位置，注释或删除相关location块，测试配置，重新加载，验证结果。同时，提供示例配置修改前后的对比，让用户更清晰。还要提醒相关指令如proxy_pass和proxy_set_header是否需要一并移除，以及处理可能的依赖配置，比如upstream块是否需要保留。</think>### Nginx 移除反向代理API配置的完整步骤 --- #### 一、定位反向代理配置 1. **找到API代理规则** Nginx中API反向代理通常通过 `location` 块定义，配置模式一般为： ```nginx location /api/ { # 匹配API路径 proxy_pass http://backend_server; # 反向代理规则 proxy_set_header Host $host; # 附加请求头 } ``` 2. **配置文件位置** - **Linux系统**：主配置文件 `/etc/nginx/nginx.conf` 或包含的 `/etc/nginx/conf.d/*.conf` - **Windows系统**：安装目录下的 `conf/nginx.conf` 或 `conf/extra/*.conf` --- #### 二、移除API反向代理配置 **方法1：直接删除相关配置段** 删除或注释掉 `location /api/` 相关配置块： ```nginx # 注释示例 # location /api/ { # proxy_pass http://backend_server; # proxy_set_header Host $host; # } ``` **方法2：修改为静态响应（可选）** 若需保留路径但停止反向代理，可改为直接响应： ```nginx location /api/ { return 404; # 返回404错误 # 或返回静态内容 # add_header Content-Type text/plain; # return 200 "API service disabled"; } ``` --- #### 三、关键操作流程 1. **备份配置文件** ```bash cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak # Linux copy conf\nginx.conf conf\nginx.conf.bak # Windows ``` 2. **测试配置语法** ```bash nginx -t # 出现 "syntax is ok" 表示配置正确 ``` 3. **重载Nginx配置** ```bash nginx -s reload # 平滑重载，不影响已有连接 ``` --- #### 四、验证配置生效 1. **请求测试** ```bash curl http://your-domain.com/api/status ``` - **预期结果**：若配置删除，应返回 `404`；若改为静态响应，返回自定义内容 2. **日志验证** 检查Nginx访问日志，确认请求未转发到后端服务器： ```bash tail -f /var/log/nginx/access.log # Linux ``` --- #### 五、关联配置清理（如有必要） 1. **移除上游服务器定义** 若 `upstream` 块仅用于API服务，可删除： ```nginx # 移除未使用的上游配置 # upstream backend_server { # server 10.0.0.1:8080; # } ``` 2. **移除依赖模块** 若反向代理相关模块（如 `ngx_http_proxy_module`）不再需要，可重新编译Nginx去除，但通常不建议修改核心模块。 --- ### 配置修改示例对比 **原始配置** ```nginx server { location /api/ { proxy_pass http://backend; proxy_set_header X-Real-IP $remote_addr; } } ``` **修改后配置** ```nginx server { # API反向代理已移除 location /api/ { return 410; # 明确提示资源已永久移除 } } ``` --- ### 常见问题排查 1. **`nginx -t` 报错** - 原因：括号不匹配或指令拼写错误 - 方案：使用 `grep -n "location /api/" nginx.conf` 定位错误行 2. **旧配置缓存未清除** - 现象：配置已修改但未生效 - 方案：执行 `nginx -s stop && nginx` 彻底重启 --- ### 进阶建议 - **版本控制**：使用Git管理Nginx配置变更，便于回滚 - **灰度验证**：通过 `include` 分文件管理配置，修改时仅影响特定测试域名 - **监控告警**：配置Prometheus监控，观察移除反向代理后的QPS和错误率变化 [^1]: Nginx官方配置维护指南 [^2]: 企业级Nginx配置版本控制实践 [^3]: 高可用Web服务故障排查手册 --- ### 相关问题 1. 如何临时禁用Nginx的某个反向代理规则而不删除配置？ 2. 移除反向代理后，如何确保后端服务器不再接收流量？ 3. Nginx配置中`location`优先级规则对配置移除有何影响？
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值