面筋系列-http-同源策略和跨域处理
2020/3/14 11:01:36
本文主要是介绍面筋系列-http-同源策略和跨域处理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
什么是同源策略
- 协议(http/https),端口(80/8080),域名(baidu/google)要相同才行
- document.domain
JSONP
jsonp-script标签的src属性不受同源策略限制,用此方式对非同源服务器请求资源,返回的JS代码会调用指定的函数,携带的参数就是所需的数据,这样就完成了跨域请求。
- JSONP(JSON with Padding(填充))是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。 1、jsonp没有使用XMLHttpRequest对象。 2、jsonp只是在一种跨域的技巧。 3、jsonp只支持Get方式
let scriptDom = document.createElement("script"); scriptDom.src="请求地址?callback=函数名"; document.body.appendChild(scriptDom); 复制代码
CORS
CORS -Cross-Origin Resource
Sharing(跨域资源共享)是一种允许当前域(origin)的资源(比如html/js/web service)被其他域(origin)的脚本请求访问的机制。当使用XMLHttpRequest发送请求时,浏览器如果发现违反了同源策略就会自动加上一个请求头:origin,后端在接受到请求后确定响应后会在Response Headers中加入一个属性:Access-Control-Allow-Origin,值就是发起请求的源地
CORS的具体流程(了解)
- 浏览器发送跨域请求
- 服务器端收到一个跨域请求后,在响应头中添加Access-Control-Allow-Origin Header资源权限配置。发送响应
- 浏览器收到响应后,查看是否设置了header('Access-Control-Allow-Origin:请求源域名或者*');
- 如果当前域已经得到授权,则将结果返回给JavaScript。否则浏览器忽略此次响应。 结论:
- 跨域行为是浏览器行为,响应是回来了的, 只是浏览器安全机制做了限制, 对于跨域响应内容进行了忽略。
- 服务器与服务器之间是不存在跨域的问题的
》 服务器处理跨域:在前后端分离的项目中可以借助服务器实现跨域,具体做法是:前端向本地服务器发送请求,本地服务器代替前端再向api服务器接口发送请求进行服务器间通信,本地服务器其实就是个中转站的角色,再将响应的数据返回给前端
jsonp与cors的对比
- jsonp兼容性好,老版本浏览器也支持,但是jsonp仅支持get请求,发送的数据量有限。使用麻烦
- cors需要浏览器支持cors功能才行。但是使用简单,只要服务端设置允许跨域,对于客户端来说,跟普通的get、post请求并没有什么区别。
- 跨域的安全性问题:因为跨域是需要服务端配合控制的 ,也就是说不论jsonp还是cors,如果没有服务端的允许,浏览器是没法做到跨域的。
使用Nginx
-
方便的跨域方案Nginx nginx是一款极其强大的web服务器,其优点就是轻量级、启动快、高并发。
-
现在的新项目中nginx几乎是首选,我们用node或者java开发的服务通常都需要经过nginx的反向代理。
反向代理的原理很简单,即所有客户端的请求都必须先经过nginx的处理,nginx作为代理服务器再讲请求转发给node或者java服务,这样就规避了同源策略。
还有哪些跨域的情况会遇到?
- iframe
PostMessage(iframe 相关的)
html5 提供的 PostMessage(data:需要传递的数据,origin: 协议+主机+端口号【+URL】)
1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 复制代码
参考
拓展阅读
这篇关于面筋系列-http-同源策略和跨域处理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性
- 2024-05-29哪些无用敏捷指标正在破坏敏捷转型?
- 2024-05-29鸿蒙原生应用再新丁!新华社 入局鸿蒙
- 2024-05-29设计模式 之 迭代器模式(Iterator)