关于JS跨域问题的理解与解决方案
2018/05/21
问题复现:今天第一次操作Ajax, 将菜鸟教程Ajax实例的代码复制到本地操作,发现Chrome报错(IE8使用的ActiveX方法正常):
Failed to load http://www.runoob.com/try/ajax/ajax_info.txt: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
百度后发现是跨域问题.
定义:跨域是指一个域下的文档或脚本试图去请求另一个域下的资源.也就是ajax或者iframe指向的地址中，
二级域名、端口、协议必须与主页面完全相同，否则就算跨域.
为什么要有跨域限制：跨域限制主要是为了安全考虑。
AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击：
- 用户登录了自己的银行页面 mybank.com，mybank.com向用户的cookie中添加用户标识。
- 用户浏览了恶意页面evil.com。执行了页面中的恶意AJAX请求代码。
- evil.com向mybank.com发起AJAX HTTP请求，请求会默认把mybank.com对应cookie也同时发送过去。
- 银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
- 而且由于Ajax在后台执行，用户无法感知这一过程。
DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击：
- 做一个假网站，里面用iframe嵌套一个银行网站 mybank.com。
- 把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
- 这时如果用户输入账号密码，我们的主网站可以跨域访问到 mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。
所以说有了跨域跨域限制之后，我们才能更安全的上网了。
跨域的解决方案:
知乎：什么是JS跨域访问？
思否：详解js跨域问题
CSDN博客：解决“No 'Access-Control-Allow-Origin'...”错误
博客园：前端常见跨域解决方案（全）