跨域概念
跨域是受到浏览器同源策略的影响,如果没有同源策略,浏览器很容易遭受一些攻击像xss
, csrf
等等。
同源策略是指协议+域名+端口都一致的情况叫同源,其他任意一种情况不同都是非同源或不同域。**不同域之间访问资源就叫”跨域”**。
- 同源策略限制了哪些内容?
- cookie,localStorage, indexDB
- dom
- ajax
有些标签元素不受同源影响可以访问资源:img,script,link
很多初级开发看到了报跨域错误时,会认为请求没有发出去,这是错误的理解。
其实请求是发出去,后端服务器中可以看到日志正常返回了数据,只不过是被浏览器认为这是不安全的访问给拦截了而已!
跨域的几种情况
由上面的概念不难看出,跨域的几种情况:
- 协议不同 https://demo.com 与 http://demo.com
- 域名不同 https://demo.com 与 http://www.demo.com
- 端口不同 https://demo.com 与 https://demo.com:81
- ip与域名不同 https://11.22.11.22 与 https://demo.com
解决跨域方法
script方式jsonp
因为script不受同源影响,可利用其封装一个jsonp方法
iframe
cors
反向代理
websocket
Node中间件
实现原理:同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略。
postMessage
使用场景
- 与iframe里的页面传递数据
- 多窗口之间数据传递
- 与打开的新窗口传递数据用法
otherWindow.postMessage(message, targetOrigin, [transfer]);canvas操作图片的跨域问题
浏览器开启跨域方式,此方法可以从源头关闭浏览器的同源策略(此方法不建议)
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 chaoyumail@126.com