当前位置：首页 > news >正文

前端Nginx的安装与应用

news 2025/8/19 12:07:09

一、前端跨域方式

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 pgp

nginx/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：表示如果请求受理失败，暂停指定的时间之后重新发起请求。