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,但一直迷迷糊糊的不明白 ...
随机推荐
- DIOCP之开发流程图之Client
本次分析开发流程图采用的是DIOCP群里的群友[彩蛋]所给的DEMO,依然是win7的画图作品. 本人分析认为:学习网络开发不同本地开发,首先你应该知道完整的开发流程即网络程序运行的先后顺序,有个整体 ...
- cordova常用资料源
cordova的中文资料https://github.com/CordovaCn/CordovaCn 官方文档: http://cordova.apache.org/docs/en/latest/ E ...
- table的遍历
1.for k,v in pairs (tbtest) do 这样的遍历顺序并不是tbtest中table的排列顺序,而是根据tbtest中key的hash值排列的顺序来遍历的 2.for k,v i ...
- Access批量操作
鉴于C#要插5万条记录到Access很慢,在网上找了好久的资料,终于找到了比较有用的信息(转载自Bach)谢谢! 总结如下: 1.导出TXT: select * into [data.txt] in ...
- double四舍五入,double四舍五入并转成string
import java.math.BigDecimal; /** * 处理一些数据类型的方法的java类 * @author ljb * */public class NumberTools { /* ...
- android app上线后bug的处理
app上线后,后期维护显得尤为重要,今天给大家分享一下app上线后出现bug后的解决方法 1.继承Application类,重写onCreate方法 import java.io.File; impo ...
- android 异步加载框架 原理完全解析
一.手写异步加载框架MyAsycnTask(核心原理) 1.我为大家手写了一个异步加载框架,涵盖了异步加载框架核心原理. MyAsycnTask.java import android.os.Hand ...
- 《Linux多线程服务端编程:使用muduo C++网络库》上市半年重印两次,总印数达到了9000册
<Linux多线程服务端编程:使用muduo C++网络库>这本书自今年一月上市以来,半年之内已经重印两次(加上首印,一共是三次印刷),总印数达到了9000册,这在技术书里已经算是相当不错 ...
- workflow createPath
针对不同的流程,createpath不同,但是创建审批链,和创建表都有 1.GetUserInfoByListColumn 控件已创建的.先Rebuild,属性需要注意 2.CreateListIte ...
- PoEdu - C++阶段班【Po学校】- Lesson02_类与对象_第4天
复习:上节作业讲解 注意点: 设计SetString()的时候,要注意重置原来的空间. char * SetString(const char *str) { _len = strlen(str); ...