jsonp

看了很多关于jsonp的，目前只看到此篇写的浅显易懂。引人入胜。 还有界面的布局也焕然一新，给人不同的感觉。 推荐下 ，转自 http://www.cnblogs.com/twobin/p/3395086.html#!comments 何为跨域？何为JSONP？JSONP技术能实现什么？是否有必要使用JSONP技术？ 跨域 就是由于JavaScript同源策略的限制，使得a.com域名下的js无法操作b.com或c.a.com域名下的对象或数据。简单理解同一个域就是：相同域名、相同端口、相同协议！ 同源策略 就是阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。即受到请求的URL的域必须与当前Web页面的域相同，意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。 “同源策略”的意义 “同源策略”有效地阻止了一些危险行为，如你同时打开多个网站时，其中有一个木马网站，那么木马网站就有可能窃取其他网站上关于你的信息或资料（因为多个网站间是可以相互通信的），给网上用户带来很大的泄密风险。正是由于有了“同源策略”，才大大降低了这种风险，由于木马网站与其他你浏览的网站不同源，因此无法相互间通信访问、获取数据等。 “同源策略”的不足 虽然“同源策略”在一定程度上保护了用户的网络安全，但如果有时就是需要让www.aaa.com取得www.bbb.com上的数据，同样是因为”同源策略

前言 ajax，用苍白的话赞扬：很好。 我们可以使用ajax实现异步获取数据，减少服务器运算时间，大大地改善用户体验；我们可以使用ajax实现小系统组合大系统；我们还可以使用ajax实现前端的优化。（好一个排比） 虽然ajax很好，但在使用起来也会有一定的限制，出于安全考虑，不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。（下面例子1可以直观看出） 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。—— 摘自developerWorks 所谓同源是指，域名，协议，端口相同。 平地一声吼 本文讲解的是怎么利用ajax利用jsonp实现跨域请求，那么知道“同源策略”，就可以解决很多疑问：“为毛我的ajax加载不了数据！”“为毛浏览器控制台会对我如此漂亮的代码报错！” 例子1 先上一个错误示范 客户端代码： <script> // 客户端使用getJSON方法请求另一台机子上的脚本 $.getJSON("http://172.22.22.120/new/ajax.php",function(json){ alert(json.website

需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在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

前后端分离之后，联调的时候就会出现问题，那就是Ajax跨域问题。 跨域问题的解决方案有很多种，比如常规的 后端使用CROS，设置允许访问接口的地址 或者 使用 JSONP 等等。 chrome53 使用在 chrome快捷方式 的属性里面 添加 --disable-web-security --user-data-dir 不起作用。需要使用在命令行下打开 一、命令行打开方式 "C:\Users\UserName\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir // 不知道chrome.exe 地址的话，右键chrome图标-->属性-->如下图-->图中 目标 就是文件的位置了，直接复制出来即可 通过命令行启动chrome： open -a "Google Chrome" --args --disable-web-security --user-data-dir chrome 48 命令行启动不支持设置跨域了,想要跨域,还需要需要在加上 —user-data-dir windows 新建一个 chrome.exe 的快捷方式, 并且关闭所有的chrome浏览器 设置参数，关闭 同源策略 --args --disable-web-security

需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在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

需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在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

你是否发现项目中有很多页面只用到了框架不到十分之一的内容，还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法，其他大部分的你方法你甚至从来没有看过 你是否发现fetch好像比ajax好用那么一点 你是否想过自己封装个ajax.... 纯前端写得久了，便想折腾点事情。比如先定一个小目标，年前自己写个类jquery轻量级库.... 那么就从自己封装一个ajax切入吧，首先我整理的一个思维导图，一目了然 解析参数数据 通常我们的请求后面会有一些参数，如果是get请求当然可以直接通过'&'拼在url后面。那么post就需要做一下处理了，如果参数是字符串，则将字符串用‘&’符号切割转化成键值对形式，同时用encodeURIComponent转码，最后类似于jquery的处理，将/%20/g（空格）替换成'+'。 　　　　　　getData: function(){ var name, value; if (opts.data) { if (typeof opts.data === "string") { opts.data = opts.data.split("&"); for (var i = 0, len = opts.data.length; i < len; i++) { name = opts.data[i].split("=")

因为浏览器的同源策略限制，不是同源的脚本不能操作其他源下面的资源，想操作另一个源下面的资源就属于跨域了，这里说的跨域是广义跨域，我们常说的代码中请求跨域，是狭义的跨域，即在脚本代码中向非同源域发送http请求 浏览器的同源策略（SOP/same origin policy）是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS（跨站脚本攻击 cross site scripting）和CSRF（跨站请求伪造cross-site request forgery）等攻击。 （同源 origin：协议，域名，端口号，不清楚的话，直接在浏览器控制台中输入window.location.origin看看返回值就知道了。） 下面两种情况，是不受跨域限制的，严格来讲，这两种情况只是跨站资源请求： 　　1）页面中的链接，重定向及表单提交是不受同源策略限制的 　　2）跨域资源的引入，如<script src=""> <image src=""> <iframe>等 从上面的第二种情况，我们可以发现，但凡通过src去获取非同源状态的资源时，都是不受跨域限制的，那我们就可以想想，是否可以借助这种跨站资源请求的方式来实现http跨域请求呢？这就是我们接下来要说的第一种跨域解决方案：jsonp 1、JSONP（不仅限于python，所有的GET请求都可以使用jsonp实现跨域） 　　1

发出空refer的POC <!DOCTYPE html> <html> <head> <meta name="referrer" content="never"> </head> <body> <script> function asd(json){ alert(JSON.stringify(json)); } </script> <script src="https://jiameng.58.com/collect/contactInfo?callback=asd"></script> </body> </html> 修复 验证refer或者header token 场景 APP调用的后端接口存在jsonp劫持 在该场景中，APP没有统一设置refer，也即大部分请求没有refer。 这导致了refer不可取。 没有设置refer，意味着所有请求其实和第三方来源请求都是一样的，服务器也分不清。 最后的想法，APP端通常很多奇怪的header，而csrf/jsonp劫持的payload难以设置header，所以可以判断header。 为什么难以发出自定义header的请求 来源： https://www.cnblogs.com/huim/p/11005938.html

一、同源和非同源（跨域） Ajax:同源 JSONP:非同源（跨域），实现跨域请求最常见的方式是JSONP，其它的方法后续再做总结 区分同源和非同源： 对比当前地址和请求地址的协议、域名或IP、端口号，如果有一项不一样都是非同源 二、JSONP原理（一定要对方服务器支持） 利用script标签中没有跨域，只要给script标签中给src一个合法的地址，就可以将对应的内容请求回来 JSONP实现跨域的具体方法： 1. 首先把跨域的地址赋给script标签中的src属性 2. 把当前页面中某一个函数名当作参数值传递给需要跨域请求数据的服务器（url问号传参） 3. 服务器接收到请求后，经过特殊处理，把你传递的函数名和需要给你的数据拼接成字符串 4. 服务器将处理好的数据返回给客户端 <script charset="utf-8" text="text/javascript" src="https://dp3.qq.com/dynamic?pf=h5&sdktype=3&chid=-1&appversion=171101&get_type=sdkconfig?callback=fn"></script> <script> function fn(data){ //data即为请求回来的数据 console.log(data) } </script> 来源： CSDN 作者： qq