跨域如何解决,什么是同源策略转发
Posted Mr song song
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨域如何解决,什么是同源策略转发相关的知识,希望对你有一定的参考价值。
跨域:
当前页面中的某个接口,请求的地址和当前页面的地址中,协议、域名、端口号有一项不同就是发生了跨域请求
原因:
游览器为了保护网页的安全,同源协议策略,如果缺少了同源策略,游览器很容易受到XSS、CSRF等攻击
跨域报错如下:
跨域解决方案:
- JSONP(a、img)
使用script标签,利用其可以跨域请求资源,将回调函数作为参数拼接到url上。
后端收到请求后,调用该回调函数,并将数据作为参数返回
响应头返回文档类型应设为javascript
缺点是只支持GET请求,安全性差可能会遭受XSS攻击
JSONP和ajax都是向服务器端发送请求,但Ajax属于同源策略,JSONP属于非同源策略
- CORS
通过后端设置允许跨域实现
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Origin','GET, PUT, OPTIONS, POST')
- node中间件,nginx反向代理
跨域限制时,游览器不能跨域访问服务器,node中间件,nginx反向代理,都是让请求发给代理服务器,静态页面和代理服务器是同源的,代理服务器再向后端服务器发送请求,同源限制对服务器不加限制
(中间件就是一种功能的封装方式,就是封装在程序中处理http请求的功能、Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器)
-
- 代理服务器接受客户端请求,转发请求给后端服务器
- 代理服务器接收来自后端的响应,转发给客户端
- postMessage
H5新增API,通过发送和接收API实现跨域通信,可用于解决:
页面和其打开的新窗口的数据传递
多窗口之间的信息传递
页面与嵌套的iframe消息传递
如上三个场景的跨域数据传递
- webSocket
websocket是html5的一个持久化协议,实现了游览器和服务器之间的全双工通行信,也是解决跨域请求的一种方案
websocket和HTTP都是应用层协议,都基于TCP协议
webscoket是一种双向通信协议,在建立连接(此时需要借助HTTP协议之后就与HTTP无关了)后
webscoket的客户端和服务器端都能主动向对方发送或接受数据
- window.name + iframe
- location.hash + iframe
- document.domain +iframe
跨域场景:
前后端分离开发,请求第三方接口
同源策略:
- 定义
当两个url的协议、域名、端口号相同时这两个url就是同源的,同源的两个url间可以进行相互资源访问和操作DOM
不同源的url之间进行资源访问就会受到游览器的安全策略限制,这就是同源策略
- 体现
DOM:同源策略限制不同源站点之间JavaScript脚本对当前DOM对象的读写操作
Web数据:同源策略限制不同源站点访问当前站点的cookie、sessionStorage、localStorage
网络:同源策略限制通过XMLHTTPRequest等方式将当前站点的内容发送至不同源站点
总结:
- CORS支持所有类型的HTTP请求,是跨域请求的根本解决方案
- JSONP只支持GET请求,优势在于支持老式游览器和不支持CORS的网站请求数据
- Node中间件和nginx,都主要通过同源策略对游览器不加限制的原理
转发自:https://www.cnblogs.com/Du9191/p/16217638.html
以上是关于跨域如何解决,什么是同源策略转发的主要内容,如果未能解决你的问题,请参考以下文章