前端跨域问题比较集中的出现在ajax跨域上,事实上我也回答过很多关于类似的问题,线上线下都有。这里简单的列举几类问题。
首先澄清一点,浏览器的同源策略引起了跨域访问限制这个问题,同源策略的初衷是阻止恶意js脚本访问其他域的敏感数据(设想其他网站的js代码可以调用你网银的支付或者转账功能)。但有很多网站,前后台不在同一个域下,或者多个域下的几个字页面需要交换数据,这就必须绕过同源策略,这就是跨域。针对要访问资源的不同,跨域有很多种方式,今天说的是ajax的跨域问题。但我们不讨论具体的原理,只是列举我解答过的几种问题。这几种问题回答的次数都不少,可见是令大多数初学者困惑的棘手问题去。
为什么form表单可以直接访问后台API,ajax不行?
跨域问题针对的是比较危险的js代码,不会阻止其他动作触发的跨域访问。
为什么ajax发出了并且后台正确相应(比如返回码是200 OK),然后才是浏览器阻止跨域并报错?
首先同源策略是浏览器本身的策略,这意味http服务器并不关心前台是否跨域。所以数据没问题的话,后台可以正常返回结果。
当浏览器收到服务器的返回数据之后,检查来源,发现和脚本的执行方并不属于同一域,并且未发现后台允许此域下脚本访问(根据一组http header),于是丢弃结果并报告错误。注意,此时js脚本不能收到数据。
有的同学可能要问为什么浏览器不在尽可能早的时候阻止对后台的访问?那是因为浏览器并不能确定后台是否允许访问,所以它必须等到后台返回,检查结果中是否包含一组特殊的http header,以说明脚本执行方是否有访问权限。
这一组http header 后续再说,总之,后台有能力告知浏览器允许那个域下的脚本访问。
为什么我使用了jquery 的jsonp,但依然无法得到后台的数据?
jsonp需要后台配合你,也即是,后台也“需要实现”相关的功能。拿着jsonp访问访问任何受限制的API,是不可能的。
欢迎大家留言,如果有比较典型的问题,我会继续追加到这篇文章后面,谢谢。