前端Nginx的安装与应用

目录

一、前端跨域方式

1.1、CORS(跨域资源共享)

1.2、JSONP(已过时)

1.3、WebSocket

1.4、PostMessage

1.5、Nginx

二、安装

三、应用

四、命令

4.1、基本操作命令

4.2、nginx.conf介绍

4.2.1、location模块

4.2.2、反向代理配置

4.2.3、负载均衡模块

4.2.4、通过反向代理来实现负载均衡

一、前端跨域方式

1.1、CORS(跨域资源共享)

后端服务器可以通过设置特定的HTTP响应头来允许或限制跨域请求。

  • Access-Control-Allow-Origin:指定允许访问资源的源。
  • Access-Control-Allow-Methods:指定允许的HTTP方法。
  • Access-Control-Allow-Headers:指定允许的HTTP请求头。
  • Access-Control-Allow-Credentials:指定是否允许发送Cookie

1.2、JSONP(已过时)

依赖于<script>标签可以跨域加载资源的特性。由于安全原因,现代浏览器不再推荐使用JSONP

1.3、WebSocket

WebSocket协议不遵循同源策略,因此可以用于跨域通信。但它主要用于实时通信场景。

1.4、PostMessage

HTML5引入的window.postMessage方法可以安全地实现跨源通信。它允许来自不同源的页面间发送消息。

1.5、Nginx

配置 Nginx 作为反向代理: 在你的 Nginx 配置文件中,设置一个 server 块来处理前端应用的请求,并使用 proxy_pass 指令将请求转发到后端服务器。

添加 CORS 相关的响应头: 在 server 块中,使用 add_header 指令添加 CORS 相关的响应头,以允许跨域请求。

二、安装

Nginx:一个HTTP服务器。不仅能将服务器上的静态文件(HTML、图片)通过HTTP协议展现给客户端,还可以通过反向代理来实现负载均衡。

官网:https://nginx.org/en/download.html

可以下载Stable version(稳定版),其中左边是Linux版,右边是Windows版。

nginx-1.26.2  pgpnginx/Windows-1.26.2  pgp

安装成功后文件夹列表内容如下:

启动方法:

(1)、直接双击该目录下的"nginx.exe",即可启动nginx服务器;

(2)、命令行进入该文件夹,执行start nginx命令,也会直接启动nginx服务器。

输入localhost回车后出现如下页面,表示成功启动:

三、应用

  在启动前,更换conf里的nginx.conf【自己按照自己公司的后端地址进行配置】,然后前端本地启动项目,将原始端口8080改为nginx.conf里后端地址对应的端口,即可访问到该后端数据,相当于proxy的配置。

原始的proxy内容:

  devServer: {proxy: {'/api/': {// target: 'http://10.168.31.xx:8090',//后端001target: 'http://10.168.31.xx:8090',//后端002headers: {Host: 'xx.xx.cn',Origin: 'http://xx.xx.cn/'}},'/erpimg/': {target: 'http://10.168.31.xx:xx',pathRewrite: {'^/erpimg/': ''},headers: {Host: 'xx.xx.cn',Origin: 'http://xx.xx.cn/'}},'/watermelon/job/': {target: 'http://10.168.31.xx:xx'},'/watermelon/': {target: 'http://10.168.31.xx:xx'},'/ws/': {target: 'http://10.168.xx.xx',headers: {Host: 'xx.xx.cn',Origin: 'http://xx.xx.cn/'},ws: true}},disableHostCheck: true //  新增该配置项},

四、命令

4.1、基本操作命令

启动服务:start nginx【Windows版】              nginx【Linux版】
退出服务:nginx -s quit
强制关闭服务:nginx -s stop
重载服务:nginx -s reload(重载服务配置文件,类似于重启,服务不会中止)
验证配置文件:nginx -t
使用配置文件:nginx -c "配置文件路径"
使用帮助:nginx -h

4.2、nginx.conf介绍

在项目使用中,使用最多的三个核心功能是静态服务器、反向代理、负载均衡

文件主要模块如下:

main                                # 全局配置
events {                            # 工作模式配置
} 
http {                              # http设置....server {                        # 服务器主机配置(虚拟主机、反向代理等)....location {                  # 路由配置(虚拟目录等)....}location path {....}location otherpath {....}}server {listen 28885;server_name _;location / {proxy_pass http://localhost:8080;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection $connection_upgrade;proxy_set_header Host $http_host;proxy_buffering off;proxy_read_timeout 10m;add_header Access-Control-Allow-Origin: *; # 允许所有域进行跨域请求}location /api/ {proxy_set_header REMOTE-HOST $host;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Host xx.xx.cn;proxy_set_header X-real-ip $remote_addr;proxy_pass http://10.168.31.xx;proxy_read_timeout 10m;client_max_body_size 100m;}location /erpimg/ {proxy_set_header REMOTE-HOST $host;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-real-ip $remote_addr;proxy_pass http://192.168.31.xx:4869/;# proxy_pass https://zz.zz.cn;proxy_read_timeout 10m;}location /ws {proxy_pass http://10.168.31.xx;proxy_set_header Host xx.xx.cn;# proxy_pass https://zz.zz.cn;proxy_set_header Origin https://xx.xx.cn;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}}upstream name {                  # 负载均衡配置ip_hash;                         server 192.168.1.100:8000;server 192.168.1.100:8001 down;       server 192.168.1.100:8002 max_fails=3;server 192.168.1.100:8003 fail_timeout=20s;server 192.168.1.100:8004 max_fails=3 fail_timeout=20s;}
}

4.2.1、location模块

location模块主要用于配置路由访问信息。

4.2.2、反向代理配置

通过反向代理代理服务器访问模式,通过proxy_set配置让客户端访问透明化

4.2.3、负载均衡模块

主要负责负载均衡的配置,通过默认的轮询调度方式来分发请求到后端服务器。

ip_hash:指定请求调度算法,默认是weight权重轮询调度,可以指定
server host:port:分发服务器的列表配置
down:表示该主机暂停服务
max_fails:表示失败最大次数,超过失败最大次数暂停服务
fail_timeout:表示如果请求受理失败,暂停指定的时间之后重新发起请求。

4.2.4、通过反向代理来实现负载均衡

  当网站访问量非常大,网站越来越慢,一台服务器已经不够用了。于是将相同的应用部署在多台服务器上,将大量用户的请求分配给多台机器处理。

好处:其中一台服务器万一挂了,只要还有其他服务器正常运行,就不会影响用户使用。Nginx可以通过反向代理来实现负载均衡。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/9020.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Mit6.S081-实验环境搭建

Mit6.S081-实验环境搭建 注&#xff1a;大家每次做一些操作的时候觉得不太保险就先把虚拟机克隆一份 前言 qemu&#xff08;quick emulator&#xff09;&#xff1a;这是一个模拟硬件环境的软件&#xff0c;利用它可以运行我们编译好的操作系统。 准备一个Linux系统&#xf…

AWS账号安全:如何防范与应对账号被盗风险

在云计算时代&#xff0c;Amazon Web Services&#xff08;AWS&#xff09;作为全球领先的云服务提供商&#xff0c;为企业和个人提供了强大的计算资源和灵活的服务。然而&#xff0c;随着云计算的普及&#xff0c;AWS账号被盗的风险也随之增加。我们九河云有多年用云经验&…

IPTABLE:Linux下的网络防火墙

IPTABLE&#xff1a;Linux下的网络防火墙 引言 在Linux系统中&#xff0c;IPtable是一种强大的网络防火墙工具&#xff0c;广泛应用于各种网络环境中。它不仅可以实现基本的包过滤功能&#xff0c;还能进行网络地址转换&#xff08;NAT&#xff09;、数据包记录、流量统计等高…

Java版工程行业管理系统源码-专业的工程管理软件- 工程项目各模块及其功能点清单

工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&am…

友思特应用 | 动态捕捉:高光谱相机用于移动产线上的食品检测

导读 高光谱成像技术能够为食品安全助力。以友思特BlackIndustry SWIR 1.7 Max 为代表的高光谱相机&#xff0c;完美解决了移动产线检测的应用难点。 高光谱技术&#xff1a;为食品安全保驾护航 食品安全一直是大众关心的热点话题&#xff0c;提供安全、高质量的食品需要对食…

Java——》try-with-resource

推荐链接&#xff1a; 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…

【极客兔兔-Web框架Gee详解】Day0 序言

文章目录 一、Web 开发1. 什么是Web 开发&#xff1f;2. 主要组成部分2.1 前端开发2.2 后端开发2.3 全栈开发2.4 数据库管理 3. Web开发过程3.1 规划和设计&#xff1a;3.2 开发和编码&#xff1a;3.3 测试和优化&#xff1a;3.4 部署和维护&#xff1a; 4. 总结 二、用标准库n…

点击文本将内容填入tinymce-vue 富文本编辑器的光标处

富文本编辑器组件 <template><div ref"tinymceBox" class"tinymce-box"><Editor id"myEditor" v-model"contentValue" :init"init" :disabled"disabled" blur"inputBlur" click"o…

3.2cpu

这个转换原理是基于&#xff0c;地址号*大小页内偏移量&#xff0c;通过页表使逻辑号和内存号之间建立起联系&#xff0c;从而实现地址的转换 按字节寻址&#xff0c;意思是说一个地址的大小是一个字节 页表记录的是逻辑块号与实际存储的主存块号之间的映射关系&#xff0c;是…

SQLI LABS | Less-35 GET-Bypass Add Slashes (we dont need them) Integer Based

关注这个靶场的其它相关笔记&#xff1a;SQLI LABS —— 靶场笔记合集-CSDN博客 0x01&#xff1a;过关流程 输入下面的链接进入靶场&#xff08;如果你的地址和我不一样&#xff0c;按照你本地的环境来&#xff09;&#xff1a; http://localhost/sqli-labs/Less-35/ 话不多说…

小北的字节跳动青训营与LangChain实战课:深入探索输出解析器与Pydantic解析器重构(持续更新中~~~)

前言 最近&#xff0c;字节跳动的青训营再次扬帆起航&#xff0c;作为第二次参与其中的小北&#xff0c;深感荣幸能借此机会为那些尚未了解青训营的友友们带来一些详细介绍。青训营不仅是一个技术学习与成长的摇篮&#xff0c;更是一个连接未来与梦想的桥梁~ 小北的青训营 X M…

Leetcode 两数之和 Ⅱ - 输入有序数组

这段代码实现了在一个非递减排序的数组中找到两个数&#xff0c;使它们的和等于目标值的算法。算法使用了双指针技术&#xff0c;具体思想如下&#xff1a; 算法思想&#xff1a; 初始化指针&#xff1a;定义两个指针 left 和 right&#xff0c;分别指向数组的起始位置和末尾位…

UE5.4 PCG 复制关卡实例

关卡实例&#xff1a;最大层级的管理&#xff0c;方便关卡级别的复制、重载 1.创建关卡实例&#xff0c;右箭生成PCG设置。注意&#xff1a;当关卡实例发生变化&#xff0c;需要重新手动再创建一次PCG设置 2.直接拖放到PCG图&#xff0c;设置如下 说明&#xff1a;PCG设置文…

C++ | Leetcode C++题解之第551题学生出勤记录I

题目&#xff1a; 题解&#xff1a; class Solution { public:bool checkRecord(string s) {int absents 0, lates 0;for (auto &ch : s) {if (ch A) {absents;if (absents > 2) {return false;}}if (ch L) {lates;if (lates > 3) {return false;}} else {lates…

Python 获取PDF的各种页面信息(页数、页面尺寸、旋转角度、页面方向等)

目录 安装所需库 Python获取PDF页数 Python获取PDF页面尺寸 Python获取PDF页面旋转角度 Python获取PDF页面方向 Python获取PDF页面标签 Python获取PDF页面边框信息 了解PDF页面信息对于有效处理、编辑和管理PDF文件至关重要。PDF文件通常包含多个页面&#xff0c;每个页…

设计模式(主要的五种)

1.设计模式&#xff1a; 设计模式就是代码设计经验 2.设计模式的类型&#xff1a; 分为三大类&#xff1a;创建型模式&#xff0c;结构型模式&#xff0c;行为模式 创建型模式&#xff1a; 单例模式&#xff1a;某个类只能有一个实例&#xff0c;提供一个全局的访问点。 工…

【北京迅为】itop-3588开发板摄像头使用手册Android12 双摄方案

本章节对应资料在网盘资料“iTOP-3588 开发板\02_【iTOP-RK3588 开发板】开发资料 \07_Android 系统开发配套资料\08_Android12 摄像头使用配套资料”目录下下载。 2.1 Android12 前摄后摄 网盘中默认的 Android12 源码支持四个摄像头单独打开&#xff0c;本小节我们来修改源码…

Javascript如何实现继承?

#一、是什么 继承&#xff08;inheritance&#xff09;是面向对象软件技术当中的一个概念。 如果一个类别B“继承自”另一个类别A&#xff0c;就把这个B称为“A的子类”&#xff0c;而把A称为“B的父类别”也可以称“A是B的超类” 继承的优点 继承可以使得子类具有父类别的…

测度论原创(三)

Morden Prob 文章目录 Morden ProbWeek3多维扩展和随机向量定理3.1推论&#xff1a;random variable的变换定理3.2 连续函数的可测性定理3.3 可测函数的线性组合关于拓展实数集的延伸定理3.4 可测函数的极限依旧为可测性随机变量的概率律&#xff08;Law of X X X&#xff09;…

Sql面试题二:请查询出用户连续三天登录的所有数据记录

问题&#xff1a; 现有用户登录记录表&#xff0c;请查询出用户连续三天登录的所有数据记录 id dt 1 2024-04-25 1 2024-04-26 1 2024-04-27 1 2024-04-28 1 2024-04-30 1 2024-05-01 1 2024-05-02 1 2024-05-04 1 2024-05-05 2 2…