那些年曾谈起的跨域

遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决，以至于很多人都忽略了对跨域的认识。为什么会导致跨域？遇到跨域又怎么去解决呢？本文会对这些问题一一的介绍。

在JavaScript中，在不同的域名下面进行数据交互，就会遇到跨域问题，说到跨域首先要从同源说起，浏览器为了提供一种安全的运行环境，各个浏览器厂商协定使用同源策略。

什么同源策略

同源策略：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指协议+域名+端口三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

Url组成部分

了解同源策略以后，同样需要对url的组成部分也顺带了解一下吧，只有了解url之后当出现跨域的时候才知道哪里出了问题，这样才能和后端、运维开怼，怼天怼地对空气。O(∩_∩)O哈哈~图中能够清晰的看出url中每个部分的含义：

1. protocol：协议常用的协议是http
2. auth：验证，因为明文传输用户名和密码，非HTTPS环境下很不安全，一般用的非常少
3. hostname：主机地址，可以是域名，也可以是IP地址
4. port：端口http协议默认端口是：80端口，如果不写默认就是:80端口
5. pathname：路径网络资源在服务器中的指定路径
6. serarch：查询字符串如果需要从服务器那里查询内容，在这里编辑
7. hash：哈希网页中可能会分为不同的片段，如果想访问网页后直接到达指定位置，可以在这部分设置

项目过程过程中经常会用到一些缓存，浏览器为了网页的安全在缓存的时候，由于同源策略的问题对其缓存内容进行了限制，其实想想也是对的，如果不使用同源策略的话，很容易冲掉缓存的东西。

1. Cookie、LocalStorage和IndexDB等无法读取。
2. DOM无法获得。
3. AJAX请求不能发送。

当然浏览器也没有把所有的东西都限制了，比如图片、互联网资源等还是允许跨域请求的。允许跨域请求都是使用标签，只有三个标签是允许跨域加载资源：

1. <img src=XXX>
2. <link href=XXX>
3. <script src=XXX>

在项目开发过程中时不时的就会遇到下面这样抛出了错误，有的人可能在开发过程中没有遇到过，如果是的话，你可能遇到一个很不错的后端或者运维。

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!