博客

什么是跨域

现代浏览器出于安全考虑，都会去遵守一个叫做“同源策略”的约定，同源的意思是两个地址的

协议、域名、端口号

都相同的情况下，才叫

同源

。这个时候两个地址才可以相互访问 cookie、localStorage、sessionStorage、发送 ajax 请求，如果三者有一个不同，就是不同源，这时再去访问这些资源就叫做

跨域

。

为什么禁止跨域

跨域访问会造成很多安全问题，下面我们来看一下常见的两种跨域请求：

• ajax 请求：A.com 中 请求 B.com 的接口，这个时候请求会带上 B.com 的 cookie，通常会有登录信息之类的，我们称之为 CSRF攻击
• dom 操作：A.com 中使用 iframe 嵌套了 B.com 的广告，这时候如果 B.com 对 A.com 中的 dom 任意操作，那么主网站 A.com 就崩了
• 字体文件：字体文件也有跨域限制，只是我还不明白为什么

那么哪些请求时不会造成跨域的呢

• js、css、image 等静态文件
• form 表单提交

因为这些请求不会携带 cookie，也就没有跨域限制

怎么跨域

浏览器对某些请求限制了跨域访问，但是实际开发中，我们又确实需要去跨域访问，怎么办呢？

jsonp

由于访问 js 文件是没有跨域限制的，我们可以利用这一点来做跨域。具体过程如下：

客户端预先定义好一个 function 用来接收数据，然后动态的创建一个 script 插入到页面中去后端请求数据

function run (data) {
    console.log(data.name)
}

var script = document.createElement('script')
script.src = 'http://xxx.js?callback=run'
document.body.appendChild(script)

服务端通过 callback 指定的函数名，将数据传入其中，这样 js 到达客户端就能直接执行函数，把数据传入预先定义好的函数中

run({ name: '张三' })

优点：

• 无跨域限制
• 兼容性好，古老的浏览器也可以使用，无需XMLHttpRequest或ActiveX支持

缺点：

• 只能发起 get，不能发起 post
• 只支持 http 请求，不能解决两个不同源页面之间的通信问题
• 不像 ajax 可以返回详细的状态码，用于错误处理
• 页面上会频繁