JS跨域请求的问题解析


Posted in Javascript onDecember 03, 2018

同源策略

在运行中我们有时会出错是因为我们违反了同源策略,这是一种浏览器所实施的安全措施,用于限制具有不同来源的文档之间的交互。页面的来源由其协议,主机和端口号定义。具有相同来源的资源可以相互完全访问。但是如果具有不相同的源将会拒绝访问。

http://www.a.com/a.js 
http://www.b.com/a.js 
这两个之间就不可以互相访问,因为域名的不相同

域名组成

JS跨域请求的问题解析

如果上面两个域名想互相访问就需要跨域请求,一般情况下同源政策规定:允许跨源 写入,而不允许跨源 读取这意味着同源政策不会阻止将数据写入,只会禁止他们从域中读取数据, 或者对从其域收到的响应做任何事情。

跨域请求的方法

JSONP

JSONP 称为带有填充的JavaScript对象表示,是一种通过利用HTML页面中的脚本标记可以来加载来自不同来源的代码来执实现跨域请求的方法。JSONP依赖于<script>标签可以来自不同来源的事实。当浏览器解析<script>标记时,它将获取脚本内容,并在当前页面的上下文中执行它。通常,服务将返回HTML或以XML或JSON等数据格式表示的某些数据。但是,当向启用JSONP的服务器发出请求时,它会返回一个脚本块,该脚本块在执行时会调用页面指定的回调函数,并将实际数据作为参数提供

注意:它没有相同的源点限制,即使在旧浏览器中也具有良好的兼容性但是JSONP只能用于执行跨域GET请求,服务器必须显式支持JSONP请求。

JS跨域请求的问题解析

CORS方法

为服务器提供了一种机制,告诉浏览器可以请求域A读取来自域B的数据。通过在响应中包含一个新的 Access-Control-Allow-OriginHTTP头来完成的,当浏览器收到来自跨源源的响应时,它将检查CORS头。如果响应头中指定的源点与当前源点相匹配,则允许对响应进行读访问,否则就会报错。

与jsonp相比,CORS具有以下优势:

它不仅支持GET请求,还支持POST等其他请求

它可以使用XMLHttpRequest发送和接收数据,并具有更好的错误处理机制

JS跨域请求的问题解析

总结:以上就是本篇文章的全部内容了,希望对大家学习有所帮助,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 #Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 #Javascript
小程序实现授权登陆的解决方案
Dec 02 #Javascript
mpvue 单文件页面配置详解
Dec 02 #Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 #Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 #Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 #Javascript
You might like
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
js中开关变量使用实例
2017/02/24 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Sanic框架路由用法实例分析
2018/07/16 Python
django中forms组件的使用与注意
2019/07/08 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
深圳茁壮笔试题
2015/05/28 面试题
信息工作经验交流材料
2014/05/28 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python