目录
一、前端跨域方式
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协议展现给客户端，还可以通过反向代理来实现负载均衡。
可以下载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',//后端001
target: 'http://10.168.31.xx:8090',//后端002
headers: {
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可以通过反向代理来实现负载均衡。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 前端Nginx的安装与应用
发表评论 取消回复