「前端必看」这篇Nginx反向代理技巧

最新推荐文章于 2024-09-03 15:06:59 发布
最新推荐文章于 2024-09-03 15:06:59 发布
阅读量2.4k 收藏 5
点赞数 2
分类专栏： Web前端 文章标签： 经验分享 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70058994/article/details/124567645
版权
本文介绍了如何使用Nginx作为反向代理解决前端开发中环境切换的问题，通过固定前端代理和配置Nginx，实现快速在开发、测试和生产环境之间切换，提高bug修复效率。
摘要由CSDN通过智能技术生成

然而实际上是前端服务器做了一层代理，把http://localhost:8080/api/user/login这个接口代理到https://dev.xxx.tech/user/login。这对前端开发者而言是无感的。

简单总结就是：反向代理隐藏了真实的服务端；相反地，正向代理隐藏了真实的客户端，类似kexueshangwang这种。

debug痛点

=======

问题来了，假设我们正在feature分支开发需求，这个时候上头通知要即时排查和解决一个生产bug，假设生产环境域名为https://production.xxx.tech。

我们一般会stash代码，然后切fix分支，修改target的值为"https://production.xxx.tech"，然后重新运行npm start重启开发服务器接入生产环境，静静等待，放空自己…

这个时候我们就会幻想“唉，要是不用等这么久就好了！”

是的，其实很多时候，一个bug并不复杂，可能解决bug只要1分钟，然而我们切换环境重新运

最低0.47元/天 解锁文章
m0_70058994
关注
专栏目录
前端配置Nginx反向代理
weixin_41673550的博客
07-16 344
第一步安装Homebrew，因为这里介绍的安装方式需要brew命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 第二步安装nginx brew install nginx 访问 localhost:8080，成功了说明安装好了 重启 sudo ./nginx -s reload server { listen 80; // 这里是我们想要默.
「前端必看」这篇Nginx反向代理技巧，助你准时下班陪女神(1)
m0_60634964的博客
04-18 356
但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。可以看到，我在配置中注释了X-Real-IP，而我们在生产环境下配置Nginx时，一般会保留这几项Host，X-Real-IP，X-Forwarded-For，用以保留请求的服务器域名，原始客户端和代理服务器的IP等信息。
【前端小知识】nginx反向代理
马云
12-13 1779
nginx反向代理 解决跨域问题 找到nginx配置文件.conf 修改server下的location 对象 location / { proxy_pass http://localhost:8000; } location /api { proxy_pass http://localhost:3000; } 配置监听端口 找到server下的listen改为8000 nginx -t查看下语法是否错误 ...
在Nginx上部署前端Vue项目，超级简单！！
最新发布
weixin_44904675的博客
09-03 1012
Nginx支持多种负载均衡策略，如轮询、加权轮询、IP哈希等，可以在多个Web服务器之间合理分配请求，防止单点过载，提高服务的整体性能和可用性。：Nginx可以缓存静态文件（如图片、CSS、JavaScript文件等）和动态内容的响应，减少对后端服务器的请求，加快页面加载速度。使用在线的网站测试工具，如Google的PageSpeed Insights，来检查你的网站的性能和可访问性。最后，打开浏览器并访问你在Nginx配置中设置的域名，以确保你的Vue项目已正确部署并且可以访问。
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面
weixin_34082854的博客
12-22 379
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面   1.什么是跨域以及产生原因 　　跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。 　　跨域情况如下：   url 说明 是否跨...
「前端必看」这篇Nginx反向代理技巧，助你准时下班陪女神
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-06 650
点击上方蓝字“大前端技术沙龙”关注我您的关注意义重大原创@大前端技术沙龙最近同事小G总是闷闷不乐，让我感觉慌慌的，难道是我平时压榨小G了？我转念一想，不应该啊，工作量事先都评估好了，没道...
nginx配置前端反向代理
我的博客
10-30 1865
本地这里有两个端口： 8080：前端页面 80：后端接口 在nginx配置 listen 8888; server_name 127.0.0.1; location / { root html; proxy_pass http://127.0.0.1:8080; # try_files $uri $uri/ /index.php$is_args$args;
nginx做反向代理时的真实IP_nginx反向代理_
10-02
要获取Nginx反向代理下的真实IP，主要涉及以下两个关键配置： 1. **$remote_addr 变量**：这是Nginx默认记录的客户端IP地址。在没有经过代理的情况下，$remote_addr会存储客户端的IP。但当Nginx作为反向代理时，它...
反向代理 前端
weixin_53916047的博客
02-07 478
前端解决方案 如果是前端开发，多个项目之间有相互访问的情况(只能在vue-cli的项目可以解决)。 ①在项目的config/index.js proxyTable: { ‘/api’: { target: ‘http://localhost:8080’, changeOrigin: true, pathRewrite: { ‘^/api’: ‘’ //类似于nginx反向代理所有以api开头的访问 } }, }, ②在main.js中加入全局访问配置 为了不改变原来的访问，或者不需要每一次访问后台都要加上a
前端配置nginx反向代理
qq_46344419的博客
07-25 673
前端配置nginx反向代理
前端配置反向代理
weixin_55116366的博客
03-01 4512
前端配置反向代理baseURL
前端代理和nginx反向代理
weixin_44922480的博客
11-06 4315
前端代理和nginx反向代理
前端解决跨域------反向代理
欢迎大家一起攻克bug
08-17 1323
前端解决跨域------反向代理
前端配置反向代理proxyTable
daishu_shu的博客
07-26 1125
提示文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
nginx反向代理使用（详细版）
qq_50853940的博客
05-14 2479
a. 访问路径为协议：域名（或ip）：端口，在浏览器输入http:abcd.test.cn，相当于访问nginx，nginx的端口为上文写的listen 80，在http协议下：80端口可以省略不写（在https协议下：43端口可以省略不写）此例：你去找nginx访问项目，nginx通过配置的localhost去 前端/后端 将得到的再返回给你（所以nginx对于前后端项目来说是反向代理）（这里的前端/后端都有自己的端口，是不能和nginx端口一样的）（停止nginx命令为nginx -s stop）
Web前端性能优化之反向代理
weixin_34113237的博客
07-05 292
前面我们介绍过怎么通过减少Http请求和CDN的方式来优化Web前端性能，今天我们就来简单的介绍一下通过反向代理来优化Web前端性能。 首先我们来了解一下什么叫反向代理？ 1、正向代理与反向代理？ 　　正向代理是位于客户端和原始服务器之间的服务器，为了能够从原始服务器获取请求的内容，客户端需要将请求发送给代理服务器，然后再由代理服务器将请求转发给原始服务器，原始服务器接受到代理服务器的请求...
前端小结：反向代理 - http-proxy
m0_37120609的博客
11-06 6355
1、需求 　　前后端分离项目中，需要使用反向代理，已解决跨域访问问题，在这里需要了解正向代理、反向代理等概念， 2、正向代理        正向代理比较好理解，类似于一个跳板，用来代替客户访问外部资源。   例如：      A向C借钱，由于一些情况不能直接向C借钱，于是A想了一个办法，他让B去向C借钱，这样B就代替A向C借钱，A就得到了C的钱，C并不知道A的存在，B就充当了A的代理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值