经常说到jsonp,今天理一理。

同源策略

同协议,同域名,同端口;

会限制你的ajax,iframe操作,窗口信息的传递,无法获取跨域的cookie、localStorage、indexDB等;

jsonp

原理很简单,html中大部分的src不受同源策略限制,包括link、img、css(background-image等),运用script中src自带的跨域属性请求后台接口

function addScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
} //回调句柄
function handle(data){
  console.log(data);
}
//假设请求接口,约定callback字段
addScript(“http://******/getdata?callback=handle”);

  node代码:

/* GET jsonp listing. */
router.get('/', function (req, res, next) {
   //模拟数据
var data = {
mess: 'hi'
};
   //获取回调函数名
var callback = req.query.callback;
if (callback) {
data = JSON.stringify(data);
     //返回为字符串
res.send(`${callback}(${data})`);
} else {
res.send('nocallbak');
}
});

  回调结果:并没有JSON.parse

注意事项:

  jsonp有很多限制值得注意,只能发送GET类型的请求,无法监测请求是否成功,请求一旦完成立马触发函数,控制的手段比较有限,但好在兼容性不错所有浏览器都支持,不用多余的配置。

小刀jsonp跨域的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  3. jsonp跨域+ashx(示例)

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  4. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  5. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

  6. 我的jsonp跨域问题

    关于jsonp跨域问题,在这个方面也是了解一点点,先记录下来,主要作为以后查看,之前下载并安装过wampserver,了解到了jsonp和json的区别,现在谈谈跨域这个问题: 首先什么是跨域,简单地 ...

  7. jsonP跨域调用

    -------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...

  8. JSONP跨域的原理解析( 一种脚本注入行为)

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...

  9. jsonp跨域问题

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式). 同源策略限制 ...

随机推荐

  1. tcp和udp详解??

    TCP:面向连接的可靠传输 tcp规定了:传输服务必须建立连接      传输结束必须断开连接      传输数据必须保证可靠 数据的可靠性:无重复.无丢失.无失序.无差错. 建立连接(三次握手): ...

  2. WPF拖拽文件(拖入拖出),监控拖拽到哪个位置,类似百度网盘拖拽

    1.往wpf中拖文件 // xaml <Grid x:Name="grid_11" DragOver="Grid_11_DragOver" Drop=&q ...

  3. Agreeing to the Xcode/iOS license requires admin privileges, please run “sudo xcodebuild -license” a...

    报错: 从错误信息来看,似乎需要通过管理员身份来接受许可协议,于是试着从这个角度google,终于在这里找到了解决方法: 1.打开终端,输入  sudo xcodebuild -license 2.终 ...

  4. Vue 数据持久化

    方法一:使用 localStorage 存储数据 window.localStorage.setItem(key,value) 方法二:使用 vuex-persistedstate插件 vuex 存在 ...

  5. mysql随机取一条记录

    function getTodayLook($limit) { $sql = "select * from `tvhome_movie_today` order by rand() limi ...

  6. Codeforces Round #426 (Div. 2) - C

    题目链接:http://codeforces.com/contest/834/problem/C 题意:两个在玩一个游戏,对于每一轮,选定一个自然是k,初始两人的分数都为1,每一个回合赢的人在他当前分 ...

  7. 08java进阶——异常

    1.异常的概念 package cn.jxufe.java.chapter08.demo01; public class Test01ArithmeticException { public stat ...

  8. Linux之vim按键

    1. 移动光标的方法 h或左箭头 光标向左移动一个字符 j或下箭头 光标向下移动一个字符 k或上箭头 光标向上移动一个字符 l或右箭头 光标向右移动一个字符 如果想要向下移动30行,可以使用“30j” ...

  9. 两张图理解nodeJS

  10. python:实例属性和类属性

    由于Python是动态语言,根据类创建的实例可以任意绑定属性. 给实例绑定属性的方法是通过实例变量,或者通过self变量: class Student(object): def __init__(se ...