jquery读取json文件跨域_跨域方法的若干种方式
一、跨域的解释
那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制, a.com 域名下的js无法操作 b.com 或是 c.a.com 域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。
必须要注意:跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。之所以会跨域,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完全一致。
特别强调两点:
第一:如果是协议和端口造成的跨域问题“前台”是无能为力的。
第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”。
二、同源策略及其限制
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。它的存在可以保护用户隐私信息,防止身份伪造等(读取Cookie)。
同源策略限制内容有:
- Cookie、LocalStorage、IndexedDB 等存储性内容
- DOM 节点
- AJAX 请求不能发送
但是有三个标签是允许跨域加载资源:
- 其中 fn 是客户端注册的回调的函数,目的获取跨域服务器上的json数据后,对数据进行在处理。
5、jQuery的jsonp形式
JSONP都是GET和异步请求的,不存在其他的请求方式和同步请求,且jQuery默认就会给JSONP的请求清除缓存。
四、跨域处理方法CORS
1、CORS原理
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
2、CORS优缺点
CORS要求浏览器(>IE10)和服务器的同时支持,是跨域的根本解决方法,由浏览器自动完成。优点在于功能更加强大支持各种HTTP Method,缺点是兼容性不如JSONP,只需要在服务器端做一些小小的改造即可。
header("Access-Control-Allow-Origin:*");header("Access-Control-Allow-Methods:POST,GET");
如网站 http://localhost:63342/ 页面要请求 http://localhost:3000/users/userlist 页面,userlist页面返回json字符串格 {name:'Mr.Cao',gender:'male',career:'IT Education'}:
//在服务器端设置同源策略地址router.get("/userlist", function (req, res, next) { var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'}; res.writeHeader(200,{"Access-Control-Allow-Origin":'http://localhost:63342'}); res.write(JSON.stringify(user)); res.end(); });
在头上添加 Access-Control-Allow-Origin 属性,指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS,并且允许的源包括了本网站,那么就不会拦截请求响应。
五、跨域处理方法WebSocket
Websocket是HTML5的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议,都基于 TCP 协议。但是 WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时,WebSocket 在建立连接时需要借助 HTTP 协议,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。由于原生WebSocket API使用起来不太方便,Socket.io很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。
//前端代码:
user input:
//Nodejs socket后台:var http = require('http');var socket = require('socket.io');// 启http服务var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-type': 'text/html' }); res.end();});server.listen('8080');console.log('Server is running at port 8080...');// 监听socket连接socket.listen(server).on('connection', function(client) { // 接收信息 client.on('message', function(msg) { client.send('hello:' + msg); console.log('data from client: ---> ' + msg); }); // 断开处理 client.on('disconnect', function() { console.log('Client socket has closed.'); });});
六、跨域处理方法postMessage
如果两个网页不同源,就无法拿到对方的DOM。典型的例子是iframe窗口和 window.open 方法打开的窗口,它们与父窗口无法通信。HTML5为了解决这个问题,引入了一个全新的API:跨文档通信 API(Cross-document messaging)。这个API为window对象新增了一个 window.postMessage 方法,允许跨窗口通信,不论这两个窗口是否同源。
postMessage方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin),即"协议 + 域名 + 端口"。也可以设为 *,表示不限制域名,向所有窗口发送。
接下来我们看个例子: http://localhost:63342/index.html页面向 http://localhost:3000/message.html传递“跨域请求信息”
//发送信息页面 http://localhost:63342/index.html 跨域请求
总结
跨域方式技术在不断变化,只谈一下现在最主流的几种方式,起到抛砖引玉的作用。
jquery读取json文件跨域_跨域方法的若干种方式相关推荐
- jq ajax 读取本地文件,jquery读取本地文件
$(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquer ...
- 将数据写入json文件,并且读取json文件中的数据
目录 一.将数据生成json文件 二.读取json文件中的数据 三.方法测试 四.其他附件 1.User实体类 2.import 一.将数据生成json文件 方法 /*** 生成.json格式文件*/ ...
- jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
- netcore读取json文件_.net core读取json格式的配置文件
在.Net Framework中,配置文件一般采用的是XML格式的,.NET Framework提供了专门的ConfigurationManager来读取配置文件的内容,.net core中推荐使用j ...
- Swift学习_读取json文件重载
相关知识: swift支持方法的重载 方法的重载:方法名称相同,但是参数不同.包括: 参数的类型不同 参数的个数不同 override func viewDidLoad() {super.viewDi ...
- python读取json文件,大批量写入mongo
1.需求:现在要求将服务器上523GB的json文件,导入到mongo库中,由于mongoimport 速度在25MB/s, 现在用脚本多进程将数据读取,在写入mongo中. 2.源码: # -*- ...
- Java 读取 JSON 文件转成 Map 对象
Java 读取 JSON 文件转成 Map 对象 应用场景 待读取的外部 JSON 文件 Java 代码 读取结果 Gson 应用场景 Jar 包或 War 包引用一个外部文件作为项目运行的配置文件 ...
- 新手如何使用JavaScript读取json文件 v2.0
前言 3年前,我在纯小白时期写的一篇文章:新手如何使用JavaScript读取json文件 至今仍时常有小伙伴点击. 如今自己在此知识领域已经有所成长,故重写一篇更高质量,更有帮助的文章,希望更有效的 ...
- R读取json文件并转化为dataframe
R读取json文件并转化为dataframe 目录 R读取json文件并转化为dataframe R读取json文件 把json转为dataframe
最新文章
- REM重复制造的冲销
- [ZT]firefox实现ie的方法和属性)
- 巧改注册表拥有超级cpu
- c语言if语句判断ab大小,C语言条件语句ifppt课件
- 我国计算机辅助翻译专业,我国翻译硕士专业之计算机辅助翻译课程调查.pdf
- 用c++编写的植物大战僵尸
- 【路由优化】基于能量均衡高效的LEACH协议改进算法附matlab代码
- BSOD 0x00000133
- 怎么彻底卸载cad2017_彻底卸载CAD的方法图解步骤
- CSS3 之 童年的纸飞机
- 回顾:HTTP/HTTPS/对称加密/非对称加密/session/cookie/token
- Android 分享到LINE
- 你的时间都去哪了?(一)数据分析指标
- 服务器和交换机物理连接_「网络安全」网络设备篇(6)——四层交换机
- 医院如何发送体检报告短信(附模板内容)
- 基于最小二乘法的图像边界曲线拟合(matlab平台)
- [转载]Emit学习之旅(1):Emit概览
- 不完美才美—少有人知道的幸福之路
- php odbc连接池,修复︰ 使用连接池的 SQL Server ODBC 连接时设置的连接属性失败
- application.yml中定义数组的两种方式
热门文章
- MSSql ID自动增长删除数据重1开始
- 使用Facelets开发JSF程序
- 怎么设置android studio的field前缀
- java 11_Java 11 正式发布!8年免费使用!
- ubuntu下载gmt_科学网—Linux/Ubuntu安装地学制图软件GMT6.0.0 - 杨家乐的博文
- python常用排序_python中的各种排序
- strcpy用于调用的参数太少_JVM:虚拟机方法调用(理解重载和重写的本质)
- html显示当前时间_HTML基础教程:超链接的使用
- php 5.5 编译安装,php5.5.38编译安装
- mysql5.7.23主主重制_MySQL5.7.23,主从复制的使用