跨域知识点整理
最近工作中总出现跨域问题，而且存在一些意识模糊的地方。或者被搞模糊的地方，于是重新完整梳理一下疑惑的地方。
什么是跨域？
浏览器的同源策略
- 协议相同：
http://,https://,ftp:// - 域名相同：
a.com,b.com,b.a.com - 端口相同：
https://a.com,https://a.com:81
MDN Same-origin_policy 示例:
| URL | 结果 | 原因 |
|---|---|---|
http://store.company.com/dir2/other.html |
同源 | 只有路径不同 |
http://store.company.com/dir/inner/another.html |
同源 | 只有路径不同 |
https://store.company.com/secure.html |
失败 | 协议不同 |
http://store.company.com:81/dir/etc.html |
失败 | 端口不同 ( http:// 默认端口是 80) |
http://news.company.com/dir/other.html |
失败 | 主机不同 |
跨源网络访问
同源策略控制不同源之间的交互，例如在使用XMLHttpRequest 或 img 标签时则会受到同源策略的约束。这些交互通常分为三类：
- 跨域写操作（Cross-origin writes）一般是被允许的。例如链接（links），重定向以及表单提交。特定少数的 HTTP 请求需要添加 preflight。
- 跨域资源嵌入（Cross-origin embedding）一般是被允许（后面会举例说明）。
标签嵌入跨域脚本。语法错误信息只能被同源脚本中捕捉到。标签嵌入 CSS。由于 CSS 的松散的语法规则，CSS 的跨域需要一个设置正确的 HTTP 头部Content-Type。不同浏览器有不同的限制： IE, Firefox, Chrome, Safari (跳至 CVE-2010-0051)部分 和 Opera。- 通过
img展示的图片。支持的图片格式包括 PNG,JPEG,GIF,BMP,SVG,... - 通过
video和audio播放的多媒体资源。 - 通过
、embed和嵌入的插件。 - 通过
@font-face引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。 - 通过