jsonp

浏览器的同源策略及跨域解决方案

无人久伴 提交于 2019-12-27 06:24:30
同源策略 一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的 源 。 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: URL 结果 原因 http://a.xyz.com/dir2/other.html 成功 http://a.xyz.com/dir/inner/another.html 成功 https://a.xyz.com/secure.html 失败 不同协议 ( https和http ) http://a.xyz.com:81/dir/etc.html 失败 不同端口 ( 81和80) http://a.opq.com/dir/other.html 失败 不同域名 ( xyz和opq) 同源策略是什么 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 不受同源策略限制的 1. 页面中的链接,重定向以及表单提交是不会受到同源策略限制的。 2. 跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="

立即执行函数(IIFE)

十年热恋 提交于 2019-12-27 00:21:29
立即执行函数(IIFE)   看到这里,相信你一定迫不及待地想知道究竟如何做了吧,其实很简单,只需要用括号全部括起来即可,比如下面这样: (function(){ /* code */ }());   为什么这样就能立即执行并且不报错呢?因为在javascript里,括号内部不能包含语句,当解析器对代码进行解释的时候,先碰到了(),然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。   而立即执行函数并非只有上面的一种写法,写法真是五花八门: // 最常用的两种写法 (function(){ /* code */ }()); // 老道推荐写法 (function(){ /* code */ })(); // 当然这种也可以 // 括号和JS的一些操作符(如 = && || ,等)可以在函数表达式和函数声明上消除歧义 // 如下代码中,解析器已经知道一个是表达式了,于是也会把另一个默认为表达式 // 但是两者交换则会报错 var i = function(){ return 10; }(); true && function(){ /* code */ }(); 0, function(){ /* code */ }(); // 如果你不怕代码晦涩难读,也可以选择一元运算符 !function(){ /* code */ }();

JSONP原理及其简单封装

拜拜、爱过 提交于 2019-12-26 19:09:47
什么是JSONP 1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准; 2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>); 3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理; 4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据; 5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。 6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。 7、为了便于客户端使用数据

前端跨域问题解决方案

谁说胖子不能爱 提交于 2019-12-26 10:26:04
背景: 同源策略:NetSpace公司引入,基于浏览器安全,防止浏览器收到XSS、CSFR等攻击。同源,即协议+域名+端口完全一致。 同源策略:为保障用户信息安全,防止恶意网站窃取数据的一种安全策略。 *** “同源”:协议相同、域名相同、端口号相同 同源策略限制的行为: Cookie、LocalStorage和IndexDB无法读取 DOM和JS对象无法获取 Ajax请求不能发送 解决方案: 方案一:JSONP 原理:通过script标签引入的js不受同源策略的限制,而XmlHttpRequest对象受到同源策略的影响。可以加载跨域服务器上的脚本,用JSONP获取的不是JSON数据,而是可以直接运行的JS脚本。 eg1:jquery function jsonpCallback(data) { console.log("jsonpCallback: " + data.name) } $.ajax({ url:"http://www.nanhuaqiushui.com:8080/login", type:"get", dataType:"jsonp", data:{ name: $("#name").val(), id: $("#id").val() }, cache: false, timeout: 5000, jsonp: "callback", /

jsonp with asmx error 500

假如想象 提交于 2019-12-25 16:48:36
问题 when i try this it works perfact function test() { debugger; $.ajax({ url: "http://testweb.com/myAPI.asmx/GetPersonTest", type: "GET", contentType: "application/json; charset=utf-8", data: { userid: 1 }, dataType: "jsonp", success: function(json) { alert(json.UserID + ' ' + json.FirstName + ' ' + json.LastName); }, error: function() { alert("Hit error fn!"); } }); } in the same asmx, i have another method called as below function Post_test(){ var newURL = window.location.protocol + '//' +

Get the jqXhr.responseText on a jQuery getJSON request using JSONP

依然范特西╮ 提交于 2019-12-25 15:29:51
问题 I am writing a diagnostic site to test our server methods. One of the things I would like to see is the HTTP status code, and the actual payload returned. When I make a CORS request by using $.ajax, I can see the jqXhr.responseText to see the payload, but when I use $.getJSON to make a JSONP request, jqXhr.responseText is undefined. Is there any way to see the HTTP payload when using $.getJSON with jsonp? function callJavascript(url, callback) { var closedData; var jqXhr = $.getJSON(url,

Get the jqXhr.responseText on a jQuery getJSON request using JSONP

陌路散爱 提交于 2019-12-25 15:29:40
问题 I am writing a diagnostic site to test our server methods. One of the things I would like to see is the HTTP status code, and the actual payload returned. When I make a CORS request by using $.ajax, I can see the jqXhr.responseText to see the payload, but when I use $.getJSON to make a JSONP request, jqXhr.responseText is undefined. Is there any way to see the HTTP payload when using $.getJSON with jsonp? function callJavascript(url, callback) { var closedData; var jqXhr = $.getJSON(url,

jsonp function not working

末鹿安然 提交于 2019-12-25 13:59:43
问题 I am receiving the below error on client site. I am using jsonp and a callback function. These are the headers I have set Refused to execute script from 'http://example.com/wp-content/plugins/plugin-name/includes/core-file.php" because its MIME type ('access-control-allow-methods: get') is not executable, and strict MIME type checking is enabled. I have set these headers under my plugin core file. //Typical headers header('Content-Type: text/html'); header( "content-type: text/javascript;

上传文件夹的解决方案

依然范特西╮ 提交于 2019-12-25 11:52:05
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。 第一步: 前端修改 由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件上传组件,在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分,这部分代码封装在bjui-all.js文件中, 在bjui-all.js文件中的全局变量定义中有以下部分代码,这就是定义的有关于上传的Uploadify控件的重要变量: //文件上传对象 function FileUploader(fileLoc, mgr) { var _this = this; this.id = fileLoc.id; this.ui = { msg: null, process: null, percent: null, btn: { del: null, cancel: null,post:null,stop:null }, div: null}; this.isFolder = false; //不是文件夹 this.app = mgr.app; this.Manager = mgr; //上传管理器指针 this.event = mgr.event; this

exact string to getJSON and callback=?

烂漫一生 提交于 2019-12-25 08:47:18
问题 I'm trying to make getJSON to use JSONP object, but I can't figure out how to build the url: for instance: http://graph.facebook.com/?ids=http://legrandj.eu/article/blouse_ghost_dream where and how should I add "callback=?" parameter? thank you d. 回答1: Append &callback=? to the URL. $.getJSON('http://graph.facebook.com/?ids=http://legrandj.eu/article/blouse_ghost_dream&callback=?', function(data) { // .. }); // Or (more clean): $.getJSON('http://graph.facebook.com/?callback=?', { ids: 'http:/