前端,什么是跨域,及跨域常见的解决方案(简讲)

一、认识跨域

1、同源

符合”协议+域名+端口”三者相同,就是同源

2、同源策略

同源策略,其初衷是为了浏览器的安全性,通过以下三种限制,保证浏览器不易受到XSS、CSFR等攻击。

  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM 和 Js对象无法获得
  • AJAX 请求不能发送

3、跨域

引入同源对概念,是因为我们常指对跨域,其实就是浏览器同源策略限制的一类请求场景。

4、常见跨域情景

URL 说明 是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js
http://www.domain.com/lab/c.js
同一域名,不同文件或路径 允许
http://www.domain.com:8000/a.js
http://www.domain.com/b.js
同一域名,不同端口 不允许
http://www.domain.com/a.js
https://www.domain.com/b.js
同一域名,不同协议 不允许
http://www.domain.com/a.js
http://192.168.4.12/b.js
域名和域名对应相同ip 不允许
http://www.domain.com/a.js
http://x.domain.com/b.js
http://domain.com/c.js
主域相同,子域不同 不允许
http://www.domain1.com/a.js
http://www.domain2.com/b.js
不同域名 不允许

5、跨域解决方案

  1. 通过jsonp跨域
  2. document.domain + iframe跨域
  3. location.hash + iframe
  4. window.name + iframe跨域
  5. postMessage跨域
  6. 跨域资源共享(CORS)
  7. nginx代理跨域
  8. nodejs中间件代理跨域
  9. WebSocket协议跨域

注:我的笔记着重学习第 1 和第 6 种方法,其它第不做介绍。

6、*补充

这里不是重点,只要知道我们平时说对跨域是狭义对跨域,仅仅是浏览器出于安全考虑对一种限制,而广义对跨域,包含以下特征:

  • 资源跳转: A链接、重定向、表单提交。
  • 资源嵌入:

你可能感兴趣的:(前端,JavaScript)