首页 > 技术文章 > 跨域

tommaoxiaoqi 2020-04-03 10:56 原文

背景:服务自己的前端和后台集成到运维框架的页面中。

 

在nginx里配置转发规则:转发路径ip端口,工程名。

 

 

 

 

前端页面地址:http://ip:38085/WiseCloudDtmAdminPortal/static/dist/index.html

后台接口url:http://ip:38085/WiseCloudDtmAdminPortal/dtmService/v1/config/list

从框架调服务页面 通过WiseCloudDtmAdminPortal过滤转发到对应服务器地址。前端收到请求后再调后台接口,调与自己同源的域名即框架域名+后台url的path。框架收到请求后通过WiseCloudDtmAdminPortal过滤转发到对应服务器地址,前后台部署在同一个服务器上。

 

如果框架没有SLB,在框架主页面下直接加载前端的页面属于跨域,增加nginx先落到slb,与框架在同一个域不存在跨域,再经过nginx转发到不同的地址。

因为内网不需要https和域名。直接配的ip。

 

服务页面上提供的帮助文档等超链接,跳转到其他不同域名的页面不属于跨域。跨域是指在当前域下调用其他域下的东西,而链接则是直接跳转到对方的域下了,跟你之前的域名毫无关系。

 A页面加载B页面内容,此时还停留在A页面算跨域。

 

跨域是浏览器的同源策略限制,浏览器上的js脚本不能从其他域的脚本获取返回内容。发到后台再由后台服务或nginx转发不属于跨域。

 

后台若重定向,正常情况下,浏览器是会跳转。(这是浏览器的基本功能页面跳转,并不是从b页面获取信息停在a页面的同源场景)。但是,如果前端用Ajax请求的,则不会跳转,因为Ajax默认就是不支持重定向的,它是局部刷新,不重新加载页面。与同源无关。

 

 

通过Access-Control-Allow-Origin设置允许访问的域名来解决跨域问题,如b网站设置允许a网站来访问资源。

 

 

 

1. Host

描述请求将被发送的目的地,包括,且仅仅包括域名和端口号
在任何类型请求中,request都会包含此header信息。

2. Origin

用来说明请求从哪里发起的,包括,且仅仅包括协议和域名
这个参数一般只存在于CORS跨域请求中,可以看到response有对应的header:Access-Control-Allow-Origin

3. Referer

告知服务器请求的原始资源的URI,其用于所有类型的请求,并且包括:协议+域名+查询参数(注意,不包含锚点信息)

因为原始的URI中的查询参数可能包含ID或密码等敏感信息,如果写入referer,则可能导致信息泄露。

 

浏览器的同源策略是为了防止XSS和CSRF攻击等而设计的。

XSS:

 

 

 

推荐阅读