前端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.rhkb.cn/news/464701.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql之命令行基础指令

一&#xff1a;安装好mysql后&#xff0c;注册好账号密码。 二&#xff1a;在命令行进行登录的指令如下 mysql -u用户名 -p 例如&#xff1a;mysql -uroot -p; 然后按下回车&#xff0c;进入输入密码。 三&#xff1a;基本指令&#xff1a; 1&#xff1a;查看当前账户的所有…

小白直接冲!BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测

小白直接冲&#xff01;BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测 目录 小白直接冲&#xff01;BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测效果一览基本介绍程序设计参考资料 效果一…

论文概览 |《IJGIS》2024.09 Vol.38 issue9

本次给大家整理的是《International Journal of Geographical Information Science》杂志2024年第38卷第9期的论文的题目和摘要&#xff0c;一共包括9篇SCI论文&#xff01; 论文1 A movement-aware measure for trajectory similarity and its application for ride-sharing …

青少年编程能力等级测评CPA Python编程(一级)

青少年编程能力等级测评CPA Python编程(一级) &#xff08;考试时间90分钟&#xff0c;满分100分&#xff09; 一、单项选择题&#xff08;共20题&#xff0c;每题3.5分&#xff0c;共70分&#xff09; 下列语句的输出结果是&#xff08; &#xff09;。 print(35*2) A&a…

Linux网络命令:它用于实时监控网络接口的状态变化的命令 ip monitor详解

目录 一、概述 二、使用 1、语法 2、对象类型 3、常用选项 4、获取帮助 三、 示例 1. 监视链路层变化 2. 监视所有的网络变化 3. 仅监视路由表的变化 4. 监视特定网络接口的状态变化&#xff1a; 5. 监视网络接口地址的变化 四、实际应用 五、其他事项 一、概述 …

从APP小游戏到Web漏洞的发现

一、前因&#xff1a; 在对一次公司的一个麻将游戏APP进行渗透测试的时候发现&#xff0c;抓到HTTP请求的接口&#xff0c;但是反编译APK后发现没有在本身发现任何一个关于接口或者域名相关的关键字&#xff0c;对此感到了好奇。 于是直接解压后everything搜索了一下&#xff…

【JavaSE】(2) 方法

一、认识方法 1. 方法的定义 修饰符 返回类型 方法名(形参类型 形参名, ......){......return 返回值; } 示例代码&#xff1a; 2. 方法的作用 增强代码的可复用性。&#xff08;避免重复造轮子&#xff09;增强代码的易管理性。&#xff08;改方法就行&#xff0c;不用到处…

柯桥零基础学日语日语培训中为什么不说「ご客様」而是「お客様」?

宝子们是不是经常会看到&#xff0c;很多日语单词前面都有假名「お」或「ご」。 但是又总弄不明白为什么要用「お」、「ご」&#xff0c;用哪个更合适&#xff1f; 今天我们就来好好地扒一扒吧~ 在日语中「お・ご」这样的接头词很常见&#xff0c;一般用来表示美化。 美化语的…

【Linux】简易版shell

文章目录 shell的基本框架PrintCommandLineGetCommandLineParseCommandLineExecuteCommandInitEnvCheckAndExecBuildCommand代码总览运行效果总结 shell的基本框架 要写一个命令行我们首先要写出基本框架。 打印命令行获取用户输入的命令分析命令执行命令 基本框架的代码&am…

Git 概述及相关命令(1)

Git概述 Git是一个强大的分布式版本控制系统&#xff0c;广泛用于代码管理和协作开发。 仓库&#xff08;Repository&#xff09;: 存储项目文件及其历史记录的地方&#xff0c;分为本地仓库和远程仓库。工作区&#xff08;Working Directory&#xff09;: 用户当前工作文件所…

Java栈和队列的快速入门

栈和队列 一、栈 Stack1、概念2、基本操作3、常用方法4、举例5、分析 二、队列1、概念2、常用方法3、举例4、分析&#xff1a; 三、力扣算法快速入门232. 用栈实现队列225. 用队列实现栈 感谢 一、栈 Stack 1、概念 在 Java 中&#xff0c;栈&#xff08;Stack&#xff09;是…

docker 可用镜像服务地址(2024.10.31亲测可用)

1.错误 Error response from daemon: Get “https://registry-1.docker.io/v2/” 原因&#xff1a;镜像服务器地址不可用。 2.可用地址 编辑daemon.json&#xff1a; vi /etc/docker/daemon.json内容修改如下&#xff1a; {"registry-mirrors": ["https://…

【MySQL】深层理解索引及特性(重点)--下(12)

索引&#xff08;重点&#xff09; 1. 索引的作用2. 索引操作2.1 主键索引2.1.1 主键索引的特点2.1.2 创建主键索引 2.2 唯一键索引2.2.1 唯一键索引的特点2.2.2 唯一索引的创建 2.3 普通索引2.3.1 普通索引的特点2.3.2 普通索引的创建 2.4 全文索引2.4.1 全文索引的作用2.4.2 …

临街矩阵乘以自己转置的含义

总结: 临街矩阵* 邻接矩阵转置的(i,j) 位置表示有多少种线路从元素A跳转一条边最终落到元素j的路线. 这个也叫1_degree.

A010-基于SpringBoot的宠物健康咨询系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

DP3复现基础知识(一)—— Hydra 库

DP3 无论是 train 还是 eval 均使用了 Hydra 这一个python 库&#xff0c;这就有些代码在看的时候难以理解其通讯逻辑&#xff0c;例如&#xff1a; hydra.main(version_baseNone,config_pathstr(pathlib.Path(__file__).parent.joinpath(diffusion_policy_3d, config)) ) Hy…

记单词,不要迷信一种方法

记单词&#xff0c;不要迷信一种方法。因为&#xff0c;记单词的目的&#xff0c;就是记住单词呀。 哪一种方法能让你记住&#xff0c;快速、高效、长久地记住&#xff0c;你就使用哪种方法&#xff1b;而且&#xff0c;方法和方法之间&#xff0c;不见得是矛盾的呀。 我们举个…

【自动化利器】12个评估大语言模型(LLM)质量的自动化框架

LLM评估是指在人工智能系统中评估和改进语言和语言模型的过程。在人工智能领域&#xff0c;特别是在自然语言处理&#xff08;NLP&#xff09;及相关领域&#xff0c;LLM评估具有至高无上的地位。通过评估语言生成和理解模型&#xff0c;LLM评估有助于细化人工智能驱动的语言相…

IO流篇(一、File)

目录 一、学习前言 二、文件简介 三、文件使用 1. 绝对路径 vs 相对路径 2. 路径分隔符 3. 属性&#xff08;字段&#xff09; 4. 构造方法 5. 常用方法 5.1. 获取文件的相关信息 5.2. 判断功能 5.3. 新建和删除 5.4. 文件的获取 5.5. 重命名文件 四、文件使用练习…

spring ai 入门 之 结构化输出 - 把大模型llm返回的内容转换成java bean

目录 ​编辑 将AI非结构化文本转换为特定格式数据的应用场景说明 Spring AI 介绍 &#xff1a;为Java开发者打造的AI应用开发框架 Qwen 介绍 &#xff1a; 一个国内领先的开源大模型 Spring AI Alibaba框架介绍 &#xff1a; 一个国内最好的spring ai实现 使用spring ai …