博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS 中的跨域请求
阅读量:5093 次
发布时间:2019-06-13

本文共 1566 字,大约阅读时间需要 5 分钟。

跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了。

比如,一个带有其他域名的 src 的 <img> 标签,以及页面中引入的其他第三方的 CSS 样式等。

对于 img 以及 CSS 而言,跨域请求本身并没有更多的安全问题,因为这些请求都属于只读请求,并不会对源资源造成副作用。

而如果跨域请求是从脚本里面发出去的,由于脚本具有高度灵活性,浏览器出于安全考虑,会根据同源策略来限制它的功能,使得正常情况下,脚本只能请求同源的资源。

如果页面确实需要通过脚本请求其他网站的资源,那么就应当在跨域资源共享的机制下工作。

同源策略

对于两个页面(资源)而言,只要他们满足以下三个条件则称他们符合同源策略:

  1. 协议相同

  2. 端口相同

  3. 域名相同

可以通过JS 设置 document.domain 来通过同源策略。如:

在子域 http://a.example.com/test.html 的页面中,通过 JS 设置 document.domain='example.com' ,则当前页面与 http://example.com/page.html 符合同源策略。

简单的说,对于页面 http://www.example.com/page1.html 来说,以下页面与它都不符合同源策略,脚本无法直接请求这些资源:

  • https://www.example.com/page1.html : 协议不同

  • http://www.example.com:81/page1.html : 端口不同

  • http://another.example.com/page1.html : 域名不同

如果用的是jquery的话 可以用jsonp解决跨域

$.ajax({          url:"http://crossdomain.com/services.php",          dataType:'jsonp',          data:'',          jsonp:'callback',          success:function(result) {              for(var i in result) {                  alert(i+":"+result[i]);//循环输出            }          }    });
$.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) {     for(var i in json) {        alert(i+":"+json[i]);    } }, 'jsonp');

Jsonp原理

原理就是创建一个<script>元素,地址指向第三方的API网址,形如:
<script src="http://www.example.net/api?param1=1&param2=2"></script>
并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),
形如: callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。 

转载于:https://www.cnblogs.com/yclblog/p/6691201.html

你可能感兴趣的文章
(旧笔记搬家)struts.xml中单独页面跳转的配置
查看>>
不定期周末福利:数据结构与算法学习书单
查看>>
strlen函数
查看>>
关于TFS2010使用常见问题
查看>>
URL编码与解码
查看>>
Eclipse 安装SVN插件
查看>>
阿里云服务器CentOS6.9安装Mysql
查看>>
剑指offer系列6:数值的整数次方
查看>>
js 过滤敏感词
查看>>
poj2752 Seek the Name, Seek the Fame
查看>>
软件开发和软件测试,我该如何选择?(蜗牛学院)
查看>>
基本封装方法
查看>>
生活大爆炸之何为光速
查看>>
[Typescript] Specify Exact Values with TypeScript’s Literal Types
查看>>
Illustrated C#学习笔记(一)
查看>>
理解oracle中连接和会话
查看>>
Scrapy实战篇(三)之爬取豆瓣电影短评
查看>>
HDU 5510 Bazinga KMP
查看>>
[13年迁移]Firefox下margin-top问题
查看>>
Zookeeper常用命令 (转)
查看>>