跨域是一种浏览器同源安全策略,即浏览器单方面限制脚本的跨域访问。
1.认识跨域
很多人误认为资源跨域时无法请求,实际上,通常情况下请求是可以正常发起的(注意,部分浏 览器存在特例),后端也正常进行了处理,只是在返回时被浏览器拦截,导致响应内容不可使用。可 以论证这一点的著名案例就是CSRF跨站攻击。
此外,我们平常所说的跨域实际上都是在讨论浏览器行为,包括各种WebView容器等(其中,以 XmlHttpRequest 的使用为主)。由于JavaScript 运行在浏览器之上,所以 Ajax的跨域成为“痛点”。
实际上,不仅不同站点间的访问存在跨域问题,同站点间的访问可能也会遇到跨域问题,只要请求的URL与所在页面的URL首部不同即产生跨域,例如:
- 在http://a.baidu.com下访问https://a.baidu.com资源会形成协议跨域。
- 在a.baidu.com下访问b.baidu.com资源会形成主机跨域。
- 在a.baidu.com:80下访问a.baidu.com:8080资源会形成端口跨域。
URL首部是指
window.location.protocol + window.location.host
从协议部分开始到端口部分结束,只要与请求URL不同即被认为跨域,域名与域名对应的IP也不 能幸免。浏览器解决跨域问题的方法有多种,包括JSONP、Nginx转发和CORS等。其中,JSONP和CORS需要后端参与。
2.实现跨域之JSONP
JSONP(JSON With Padding)是一种非官方的解决方案。由于浏览器允许一些带src属性的标签跨 域,例如,iframe、script、img等,所以JSONP利用script标签可以实现跨域。
例如,我们有一个用于获取用户列表的API。
http://com.example/users/1
正常情况下,浏览器发出请求后服务器会给出类似下面的响应信息:
{
"errCode": 0,
"msg": "成功",
"data": {
"username": "张三",
"sex": "男",
"address": &