JS 跨源请求
一个 URL 大概包含的部分:scheme://host:port/path?#hash
比如一个 URL 为 http://www.xxx.com:8888/school/student.html,
那么 http 就是 scheme,www.xxx.com 就是 host,8888 就是 port,
什么是同源?
如果两个 URL 的 “scheme://host:port” 内容一样,就叫同源。
什么是跨源访问?
如果两个 URL 的 scheme、host、port 有任何一个不一样,就不同源。
这时候,一个 URL 的脚本从另一个 URL 获取数据,就叫跨源访问。
针对跨院访问,W3C 提出了一个方案叫做 CORS(Cross-Origin Resource Sharing),不过,只有现代浏览器支持此方案。
CORS 的工作方式:
1)浏览器中当前页面的脚本请求另外一个服务器的数据时,浏览器在发起连接的数据报头中附加一个 Origin 报头,
表明当前页面的来源,然后向另外一个服务器发起连接
2)目标服务器接收到浏览器的连接请求后,如果接受请求,则在响应数据流的报头中添加一个
Access-Control-Allow-Origin 报头,并给这个报头赋一个值,值为浏览器发过来的 Origin 报头值,
或者为 “*”(表示此服务器运行任何跨站请求)。如果不接受请求,则不包含 Access-Control-Allow-Origin 报头。
3) 浏览器接受到返回来的数据包进行解析,如果不包含 Access-Control-Allow-Origin 报头,则丢弃响应数据包。
关于 CORS 的论述,有一个老外大牛(Nicholas C. Zakas)的博客,可看下:
https://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
对 web 前端开发人员来说,不用做任何事情,直接在JS中发起跨域访问就是了,只不过需要浏览器做一些事情,然后服务器也要支持。
-------------------------------------------------------------------------------------------------------------------------------------------------
介绍另外一种跨源访问解决方案:JSONP( JSON with Padding ),JSONP 与 CORS 不同,可以支持老的浏览器。
要使用 JSONP,首先在 HTML 页面中定义一个处理数据的函数:
function processJSONP(data) {
// process the data
}
然后,我们向跨域服务器发起请求,并在查询字符串中加上 callback 参数以及表单数据,例如:
http://www.xxx.com/order?callback=processJSONP&name=ssss&age=111
服务器像往常一样生成 JSON 数据,把 JSON 数据当作参数传给 callback 函数,最终创建一条 JavaScript 语句,
例如:"processJSONP({'aster':'1','daff':'2','total':'5'});"
服务器同时还把响应内容的 content-type 设置成 “text/javascript”,浏览器知道收到的是 JavaScript 代码,就会执行它。
这实际上调用了我们前面定义的函数。
注意:不要随便使用 JSONP,只把它用在你信任的环境中,因为返回数据(JavaScript 语句)会被执行,
所以,有可能会被注入恶意代码,产生安全问题。
JS 跨源请求的更多相关文章
- ArcGIS Server API for JavaScript调用错误:已阻止跨源请求:同源策略禁止读取位于......
已阻止跨源请求:同源策略禁止读取位于 http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapSe ...
- js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript 在 ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
- 已拦截跨源请求:同源策略禁止读取位于XXX的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin'
vue+springboot项目 前端发送请求微信 URL:http:/.........(企业微信的路径) 请求成功,数据发送过去可以接收到,处理完毕后发送返回值给我 我这边前端网络响应处可以看到返 ...
- Spring Boot全局支持CORS(跨源请求)
import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet. ...
- 使用jsonp实现跨源请求
jsonp 该技术用来实现跨源请求,即向协议.域名.端口号不同的服务器发送请求 通过使用 script 标签的 src 向服务器发送GET请求http://xxx/xxx?callback=callb ...
- [js]ajax-异源请求jsonp
参考: http://www.cnblogs.com/whatisfantasy/p/6237713.html http://www.cnblogs.com/freely/p/6690804.html ...
- js 跨域请求原理及常见解决方案
一.同源策略: 说到跨域请求,首先得说说同源策略: 1995年,同源政策是由 Netscape 公司引入浏览器的.目前,所有浏览器都实行了这个政策. 同源策略是浏览器的一种安全策略,所谓同源是指,域名 ...
- 【JS跨域请求】Ajax跨域请求JSONP
前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...
随机推荐
- RegExp对象
RegExp()构造函数带有两个字符串参数,其中第二个是可选的,如果提供第二个参数,它就指定正则表达式的修饰符.第一个函数包含正则表达式的主题部分,也就是正则表达式直接量中两条斜线之间的文本.无论是字 ...
- centos7安装openoffice
[摘要:间接登录openoffice民网下载硬件包,但跳转的页里却不停挨没有开.末了只能正在末端里干活下了: 1. 挑选得当的版本:http://www.openoffice.org/download ...
- 新年PR交期回写,展望期由14天改为30天,FP_PR2SAP ;转单量改为100W;FP_PR2SAP_MOD_NEW
- 查linux端口连接情况用命令netstat
查linux端口连接情况用命令netstat netstat -apn |grep cdnbest 或netstat –apn | grep 3320
- 关于 The 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine. 异常处理
导入Excel在本地环境没有问题,但部署到服务器上后出现异常. 经排查,是系统问题,因为本地是32位系统,而服务器上则是64位系统. 解决方法: 1.打开IIS管理器 2.右击应用程序所在的连接池 3 ...
- 关于c#静态构造函数
http://baike.baidu.com/view/2634573.htm?fr=aladdin 在百科上看到C#的新特性静态构造函数,其中提到静态构造函数“不能继承” 今天做了个试验,发现实际上 ...
- Java基础知识系列——数组
数组是我们在编程中常用到的一种数据结构. 数组创建有三种方式,以int类型为例: 1.int value[] = new int[]{1,2,3,4,5}; //{}中的是元素 2.int value ...
- tomcat 配置ssi
tomcat想要使用html文件引入html文件的功能可以开启ssi,这样就可以在html文件中使用include指令,从而使得html文件可以动态加载html文件了. 开启ssi步骤如下: 1.ap ...
- div赋值,取值和input赋值,取值
一.div取值 <div id="txtXiaofei" class="txt-panel">你好</div> 获取div的值$(&qu ...
- 2016. last day in office
外面黑了,水面上黑魆魆的看不清楚了. 明天请假了,2017年再见! 2017加油! 2017 English improving!