前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >同源策略引发的跨域问题它都能轻松解决!这到底是什么神奇的东西儿

同源策略引发的跨域问题它都能轻松解决!这到底是什么神奇的东西儿

作者头像
攻城狮Chova
发布2022-01-22 10:24:37
6440
发布2022-01-22 10:24:37
举报
文章被收录于专栏:攻城狮Chovas

Nginx概念

  • Nginx是一款高性能的HTTP服务器,反向代理服务器及电子邮件(IMAP/POPP3)代理服务器.由俄罗斯的Igor Sysoev所开发,Nginx能够支撑5万并发链接,并且CPU,内存等资源消耗非常低,运行非常稳定

Nginx应用场景

  • HTTP服务器,虚拟主机: Nginx是一个HTTP服务可以独立提供HTTP服务,可以做网页静态服务器,可以实现在一台服务器上虚拟出多个网站,例如个人网站使用的虚拟主机
  • 反向代理: 当网站的访问量达到一定程度后,单台服务器不能满足用户请求时,需要用多台服务器集群时可以使用Nginx做反向代理
  • 负载均衡: 多台服务器可以平均分担负载,不会因为某台服务器负载高宕机而某台服务器闲置的情况

HTTP服务器,虚拟主机

  • 使用Docker安装运行Nginx,在./conf 里创建nginx.conf文件,配置docker-compose.yml
代码语言:javascript
复制
version: '3.1'
services: 
 nginx:
  restart: always
  image: nginx
  container_name: nginx
  ports:
   - 80:80
  volumes:
   - ./conf/nginx.conf:/etc/nginx/nginx.conf	
   - ./wwwroot:/usr/share/nginx/wwwroot
  • 虚拟主机: 虚拟主机是一种特殊的软硬件技术.可以将网络上每一台计算机分成多个虚拟主机,每个虚拟主机可以独立对外提供www服务,这样就能实现一台主机对外提供多个web服务,每个虚拟主机之间是独立的,互不影响的
  • 通过Nginx可以实现虚拟主机的配置,Nginx支持三种类型的虚拟主机的配置:
    • 基于IP的虚拟主机
    • 基于域名的虚拟主机
    • 基于端口的虚拟主机
  • Nginx配置文件结构: 其中每个server就是一个主机
代码语言:javascript
复制
events {
}

http {
	server{
	}

	server{
	}
}
基于域名的虚拟主机配置
  • 需求:
    • 两个域名指向同一台Nginx服务器,用户访问不同的域名显示不同的网页内容
    • 两个域名是admin.service.itoken.oxford.com和admin.web.itoken.oxford.com
    • Nginx服务器使用虚拟机192.168.32.255
  • 配置 Windows Hosts文件:
    • 修改window的hosts文件(C:/Windows/System32/drivers/etc)-SwitchHosts
    • 通过host文件指定admin.service.itoken.oxford.com和admin.web.itoken.oxford.com对应192.168.32.255虚拟机
  • 创建目录及文件:/usr/local/docker/nginx/wwwroot目录下创建htmlservicehtmlweb两个目录,并分别创建index.html文件
  • 配置虚拟主机: 修改 /usr/local/docker/nginx/conf目录下的nginx.conf配置文件
代码语言:javascript
复制
user nginx;
worker_processes 1;

events {
	worker_connections 1024;
}

http{
	include				mime.type;
	default_type	application/octet-stream;

	sendfile			on;

	keepalive_timeout	65;
	
	server{
		listen 				80;
		server_name	admin.service.itoken.oxford.com
		# 所有的请求都是以 / 开始,所有的请求都可以匹配此location
		location / {
			root  /usr/local/docker/nginx/wwwroot/htmlservice;
			# 指定欢迎页面,按从左到右顺序查找
			index index.html index.htm;
		} 
	}

	server{
		listen 					80;
		server_name		admin.web.itoken.oxford.com

		location / {
			root /usr/share/nginx/wwwroot/htmlweb;
			index index.html index.htm;
		}
	}	
}
基于端口的虚拟主机配置
  • 需求:
    • Nginx对外提供80和8080两个端口监听服务
    • 请求80端口则请求html80目录下的html
    • 请求8080端口则请求html8080目录下的html
  • 创建目录及文件:/usr/local/docker/nginx/wwwroot目录下创建html80html8080两个目录,并分别创建两个index.html文件
  • 配置虚拟主机: 修改 /usr/local/docker/nginx/conf目录下的nginx.conf配置文件
代码语言:javascript
复制
worker_processes 1;

events {
	worker_connections 1024;
}

http{
	include				mime.type;
	default_type	application/octet-stream;

	sendfile			on;

	keepalive_timeout	65;
	
	# 配置虚拟主机 192.168.32.255
	server{
		# 监听的IP和端口,配置192.168.32.255:80
		listen 				80;
		# 虚拟主机名称,这里配置IP地址
		server_name	192.168.32.255;
		# 所有的请求都是以 / 开始,所有的请求都可以匹配此location
		location / {
			# 使用 root 指令指定虚拟主机目录即网页存放目录
			# 例如:访问 http://ip/index.html 将找到 /usr/local/docker/nginx/wwwroot/html80/index.html
			# 例如:访问 http://ip/item/index.html 将找到 /usr/local/docker/nginx/wwwroot/html80/item/index.html
			root  /usr/share/nginx/wwwroot/html80;
			# 指定欢迎页面,按从左到右顺序查找
			index index.html index.htm;
		} 
	}

	# 配置虚拟主机 192.168.32.255
	server{
		listen 					8080;
		server_name		192.168.32.255;

		location / {
			root /usr/share/nginx/wwwroot/html8080;
			index index.html index.htm;
		}
	}
}

Nginx 反向代理

代理服务器

客户端在发送请求时,不会直接发送给目的主机.而是先发给代理服务器,代理服务器接收客户端请求后,再向主机发出,并接收目的主机返回的数据,存放在代理服务器的硬盘中,再发送给客户机

代理服务器作用
  • 提高访问速度: 由于目标主机返回的数据存放在代理服务器的硬盘中,因此下一次客户在访问相同的站点数据时,会直接从代理服务器的硬盘中读取,起到了缓存的作用,尤其对于热门站点能明显提高请求速度
  • 防火墙作用: 由于所有客户机请求都必须通过代理服务器访问远程站点,因此可在代理服务器上设限,过滤掉某些不安全信息
  • 通过代理服务器访问不能访问的目标站点: 互联网上有许多开放的代理服务器,客户机在访问受限时,可通过不受限的代理服务器访问目标站点
正向代理

架设在客户机和目标主机之间,只用于代理内部网络对Internet的连接请求,客户机必须指定代理服务器,并将本来要直接发送到web服务器上的http请求发送到代理服务器中

反向代理

反向代理服务器架设在服务器端,通过缓冲经常被请求的页面来缓解服务器的工作量,将客户机请求转发给内部网络上的目标服务器,并将从服务器上得到的结果返回给Internet上请求连接的客户端,此时代理服务器与目标主机一起对外表现为一个服务器

反向代理应用
  • 防止外网对内网服务器的恶性攻击
  • 缓存以减少服务器压力
  • 访问安全控制
  • 进行负载均衡,将用户请求分配给多个服务器
Nginx反向代理Tomcat
  • 启动Tomcat容器: 启动两个Tomcat容器,映射端口为9090和9091,配置docker-compose.yml
代码语言:javascript
复制
version: '3'
services:
 tomcat1:
  image: tomcat
  container_name: tomcat1
  ports:
   - 9090:8080
 tomcat2:
  image: tomcat
  container_name: tomcat2
  ports:
   - 9091:8080
  • 配置Nginx反向代理: 修改 /usr/local/docker/nginx/conf 目录下的nginx.conf配置文件
代码语言:javascript
复制
user nginx;
worker_processes 1;

events {
	worker_connection	1024;
}

http {
	include				mime.type;
	default_type	application/octet-stream;

	sendfile 			on;

	keepalive_timeout	65;

	# 配置一个tomcat1代理服务器
	upstream tomcat_server1 { 
		server 192.168.32.255:9090;
	}

	# 配置一个tomcat2代理服务器
	upstream tomcat_server2{ 
		server 192.168.32.255:9091;
	}

	server {
		listen 		80;
		server_name	admin.service.itoken.oxford.com
		# 所有的请求都是以 / 开始,所有的请求都可以匹配此location
		location / {
			# 域名 admin.service.itoken.oxford.com的请求全部转发到tomcat_server1,即tomcat1服务器上
			proxy_pass http://tomcat_server1;
			# 欢迎页面,按照从左到右的顺序查找页面
			index index.jsp index.html index.htm;
		} 
	}

	server{
		listen 			80;
		server_name		admin.web.itoken.oxford.com

		location / {
			# 域名 admin.web.itoken.oxford.com的请求全部转发到tomcat_server2,即tomcat2服务器上
			proxy_pass http://tomcat_server2;
			index index.jsp index.html index.htm;
		}
	}	
}

Nginx负载均衡

负载均衡
  • 负载均衡建立在现有网络结构之上,提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽,增加吞吐量,加强网络数据处理能力,提高网络的灵活性和可用性
  • 负载均衡(Load Balance),分摊到多个操作单元上进行执行,例如Web服务器,FTP服务器,企业关键应用服务器和其它关键任务服务器等,从而共同完成工作任务
Nginx 实现负载均衡
  • 需求:
    • nginx作为负载均衡服务器,用户请求先到达nginx,再由nginx根据负载均衡配置将请求转发到tomcat服务器
    • nginx负载均衡服务器:192.168.32.255:80
    • tomcat服务器:192.168.32.255:9090
  • Nginx配置负载均衡: 修改 /usr/local/docker/nginx/conf下的nginx.conf配置文件
代码语言:javascript
复制
user nginx;
worker_processes 1;

events {
	worker_connection	1024;
}

http {
	include				mime.type;
	default_type	application/octet-stream;

	sendfile 			on;

	keepalive_timeout	65;

	upstream myapp {
  		server 192.168.32.255:9090 weight=10;
  		server 192.168.32.255:9091 weight=10;
	}

	server{
		listen			80;
		server_name		nginx.oxford.com;
		location / {
			proxy_pass	http://myapp;
			index		index.jsp index.html index.htm;
		}
	}
}

Nginx 解决跨域问题

跨域问题

  • 在浏览器端进行Ajax请求时会出现跨域问题
  • 跨域: 浏览器不能执行其它网站的脚本.是由于浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制

同源

  • 同源: 域名,协议,端口均相同

解决跨域问题方式

使用CORS(跨资源共享)解决跨域问题
  • CORS是W3C标准,全称"跨资源共享"(Cross-origin resource sharing),允许浏览器向跨源服务器发出XMLHttpRequest请求,从而克服了Ajax只能同源使用的限制
  • CORS需要浏览器和服务器同时支持
  • 目前,所有浏览器都支持该功能,IE浏览器不能低于IE10.
  • 整个CORS通信过程,都是通过浏览器自动完成,不需要用户参与.对于开发者来说,CORS通信与同源Ajax通信没有差别,代码完全一样.
  • 浏览器一旦发现Ajax请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加 的请求,但用户不会有感觉
  • 实现CORS通信的关键是服务器,只要服务器实现了CORS接口,就可以跨域通信
  • 在header中设置:Access-Control-Allow-Origin(在服务器请求控制器中的controller类标注 @CrossOrigin(value="*") 注解)
使用JSONP解决跨域问题
  • JSONP:(JSON with Padding),JSON的一种"使用模式:,可用于解决主流浏览器的跨域数据访问问题
  • 由于同源策略,一般server1.example.com的网页无法与server2.example.com的服务器进行访问,而HTML的< script>元素是个例外
  • 利用< script>元素这个开放策略,网页可以得到从其它来源动态产生的JSON资料,而使用的这种模式就叫JSONP
  • 用JSONP抓到的资料不是JSON,而是任意的JavaScript,用JavaScript直译器执行而不是用JSON解析器解析
  • 需要目标服务器配合一个callback函数

  • CORS与JSONP比较:
    • CORS与JSON使用的目的相同,但是比JSONP更强大
    • CORS支持所有类型的HTTP请求
    • JSONP只支持GET请求, JSON的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据

Nginx反向代理解决跨域问题

  • 当服务器无法设置header或提供callback函数时就可以采用Nginx反向代理解决跨域问题
Nginx配置跨域
  • /usr/local/docker/nginx/conf中的nginx.conf里的location中增加配置(Get:字体跨域):
代码语言:javascript
复制
add_header Access-Control-Allow-Origin *或域名;
add_header Access-Control-Allow-Headers X-Requested-with;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  • 配置 /usr/local/docker/nginx/conf中的nginx.conf配置文件(POST:上传文件):
代码语言:javascript
复制
user nginx;
worker_processes 1;

events {
	worker_connection 1024;
}

http {
	include				mime.types;
	default_type		application/octet-stream;

	sendfile			on;

	keepalive_timeout 	65;

	server {
		listen			80;
		server_name		upload.myshop.com;
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-with,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
		location / {
			proxy_pass	http://192.168.32.255:8888;
			if($request_method = 'OPTIONS'){
				add_header Access-Control-Allow-Origin *;
				add_header Access-Control-Allow-Headers X-Requested-with;
				add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
				# 解决假请求问题,如果是简单请求则没有这个问题,这里是上传文件,首次请求为OPTIONS方式,实际请求为POST方式
				add_header Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-with,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range;
				return 200;
			}
		}
	}
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-05-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Nginx概念
  • Nginx应用场景
    • HTTP服务器,虚拟主机
      • Nginx 反向代理
        • Nginx负载均衡
        • Nginx 解决跨域问题
          • 跨域问题
            • 同源
              • 解决跨域问题方式
                • Nginx反向代理解决跨域问题
                相关产品与服务
                负载均衡
                负载均衡(Cloud Load Balancer,CLB)提供安全快捷的四七层流量分发服务,访问流量经由 CLB 可以自动分配到多台后端服务器上,扩展系统的服务能力并消除单点故障。轻松应对大流量访问场景。 网关负载均衡(Gateway Load Balancer,GWLB)是运行在网络层的负载均衡。通过 GWLB 可以帮助客户部署、扩展和管理第三方虚拟设备,操作简单,安全性强。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档