跨域问题之ajax

前端跨域问题比较集中的出现在ajax跨域上，事实上我也回答过很多相关的问题，线上线下都有。这里简单的列举几类。

首先澄清一点，浏览器的同源策略引起了跨域访问限制这个问题。同源策略的初衷是阻止恶意js脚本访问其他域的敏感数据（设想其他网站的js代码可以调用你网银的支付或者转账功能）。但有很多网站，前后台不在同一个域下，或者多个域下的几个子页面需要交换数据，这就必须绕过同源策略，这就是跨域。针对要访问资源的不同，跨域有很多种方式，今天说的是ajax的跨域问题。但我们不讨论具体的实现，只是列举我解答过的几种问题。这几种问题回答的次数都不少，具有普遍性，所以觉得有必要记录一下。

为什么form表单可以直接访问后台API，ajax不行？

跨域问题针对的是比较危险的js代码，不会阻止其他动作触发的跨域访问。

为什么ajax发出了并且后台正确相应（比如返回码是200 OK），然后才是浏览器阻止跨域并报错？

首先同源策略是浏览器本身的策略，这意味后台服务器并不关心前台是否跨域。所以数据没问题的话，后台可以正常返回结果。

当浏览器收到服务器的返回数据之后，检查来源，发现和脚本的执行方并不属于同一域，并且未发现后台允许此域下脚本访问（根据一组http header，这个我会另开一篇文章单独说明），于是丢弃结果并报告错误。注意，此时js脚本不能收到数据。

有的同学可能要问为什么浏览器不在尽可能早的时候阻止对后台的访问？因为浏览器并不能确定后台是否允许访问，所以它必须等到后台返回，检查结果中是否包含一组特殊的http header，以说明脚本执行方是否有访问权限。如果有，则将数据转交给js代码，如果没有，则丢弃结果，报告错误。

为什么我使用了jquery 的jsonp，但依然无法得到后台的数据？

jsonp需要后台配合你，也即是，后台也需要实现相关的功能。使用jsonp访问访问任何受限制的API，是不可能的。

---

欢迎大家留言，如果有比较典型的问题，我会继续追加到这篇文章后面，谢谢。

如果对你有所帮助或者启发，请帮我点赞和收藏。