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,但一直迷迷糊糊的不明白 ...
随机推荐
- C#中Invoke 和 BeginInvoke 的区别
Control.Invoke 方法 (Delegate) :在拥有此控件的基础窗口句柄的线程上执行指定的委托. Control.BeginInvoke 方法 (Delegate) :在创建控件的基础句 ...
- Android菜鸟成长记9 -- selector的用法
在项目开发的时候,由于系统给出的控件不够美观,因此开发时领导常常要我更改下界面,用美工给的图片取代系统图片.开始时,我只是给按钮等设置一下背景图片,这样做虽然美观了,但界面看起来却比较死板,比如用户点 ...
- [python] Ubuntu 环境下安装 python3.5 + pip
一般情况下先添加PPA,但是我添加PPA会报错: sudo add-apt-repository ppa:fkrull/deadsnakes ubuntu add-apt-repository: co ...
- C# 模拟键盘操作--SendKey(),SendKeys()
模拟键盘输入就是使用以下2个语法实现的.SendKeys.Send(string keys); //模拟汉字(文本)输入SendKeys.SendWait(string keys); //模拟按键输 ...
- 笔记007:对象——RegExp正则表达式对象
1.RegExp 一个用于匹配的模式文本 用0个或多个修饰符描述的匹配模式细节 RegExp对象的创建形式 用内建构造器创建 var re = new RegExp("j.*t&quo ...
- AWT布局管理器
布局管理器 容器内可以存放各种组件,而组件的位置和大小是由容器内的布局管理器来决定的.在AWT中为我们提供了以下5种布局管理器: ① FlowLayout 流式布局管理器 ② BorderLa ...
- Web项目中删错文件怎么办
在开发过程中,有时会因为手误将文件错误删除,会造成很大的困惑,今天看到一个网友分享的一种可以恢复文件的方式特别好用,现在分享给大家. 1.首先在删除文件的路径下创建与原来文件名字相同的文件. 2.在文 ...
- http2协议翻译(转)
超文本传输协议版本 2 IETF HTTP2草案(draft-ietf-httpbis-http2-13) 摘要 本规范描述了一种优化的超文本传输协议(HTTP).HTTP/2通过引进报头字段压缩以及 ...
- dojo布局(layout)
使用BorderContainer和ContentPane实现布局 1.效果图如下: 2.HTML代码: <div id="appLayout" class="de ...
- 简单的XML操作类
/// <summary> /// XmlHelper 的摘要说明. /// xml操作类 /// </summary> public class XmlHelper { pr ...