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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
微信小程序自动客服功能
Nov 02 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
vue删除html内容的标签样式实例
2018/09/13 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
python SOCKET编程基础入门
2021/02/27 Python
优秀实习生感言
2014/03/01 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
如何写好自荐信
2014/04/07 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
坎儿井导游词
2015/02/09 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书