网站建设和网络维护,昆明网页设计公司排行榜,南山商城网站建设哪家技术好,社区网站建设方案ppt目录
一、前端跨域方式
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(跨域资源共享)
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_fails3;server 192.168.1.100:8003 fail_timeout20s;server 192.168.1.100:8004 max_fails3 fail_timeout20s;}
}
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可以通过反向代理来实现负载均衡。
