通过JSONP实现跨域访问
时间:2022-07-24
本文章向大家介绍通过JSONP实现跨域访问,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
跨域访问
说到跨域访问就要谈到浏览器的同源策略,所谓同源指的就是协议相同、域名相同、端口号相同,三个条件必须全部匹配,否则就会收到限制,例如:
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 无法获得
- AJAX 请求不能发送
而互联网默认原则就是同源策略,也就是说不允许跨域访问。
常见的跨域可以通过标签元素实现,例如link
、script
、img
、iframe
等标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
<script>
console.log($);
</script>
</body>
</html>
例如如上代码,通过bootcdn的连接还是可以引用到jQuery。
JSONP
不过这篇文章的目的是为了介绍JSONP进行跨域。如何利用JSONP实现跨域?
通过动态创建 script
标签,通过 script
标签的 src
请求没有域限制来获取资源
例如在 html 页面中,将 script
标签地址改为后端接口。
网页通过添加一个<script>
元素,向服务器请求JSON数据,这种做法不受同原政策限制;服务器收到请求后,将数据放在一个指定名的回调函数里传回来。
json才是目的,jsonp只是手段
原生JS实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
通过script元素实现JSONP跨域访问
利用script元素的src属性制定服务器端地址
同时将制定的回调函数名称发送指定服务器
-->
<script>
function fn(data) {
console.log(data);
console.log(data.msg);
}
</script>
<!-- 函数的声明要放在请求之上 -->
<script src="http://127.0.0.1:3000?callback=fn"></script>
</body>
</html>
const http = require("http");
const hostname = "127.0.0.1";
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
// 响应数据
// 响应的数据必须是JSON格式
// 响应的数据作为调用的函数的参数传递
res.end('fn({"msg":"Hello world"})');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
jQuery的getJSON方法
JQuery中的$.getjson()
方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据
$.getJSON('http://127.0.0.1:3000?callback=?',function(){
console.log(data);
})
调用的函数名jQuery会自动生成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
$.getJSON('http://127.0.0.1:3000?callback=?', function (data) {
console.log(data);
})
</script>
</body>
</html>
const http = require("http");
const hostname = "127.0.0.1";
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
var urlObj = require("url").parse(req.url);
var functionName = urlObj.query.split("&")[0].split("=")[1];
console.log(functionName);
res.end(`${functionName}({"msg":"Hello world"})`);
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
jQuery会自动生成回调函数的名称。
- PyQt5 GUI应用程序工具包入门(2)
- 用Python研究了三千套房子,告诉你究竟是什么抬高了房价?
- 设计模式之装饰模式
- Android网络编程(六)OkHttp3用法全解析
- Android网络编程(五)OkHttp用法全解析
- Android网络编程(一)HTTP协议原理
- Spring Cloud实战小贴士:Zuul统一异常处理(二)
- Android View体系(九)自定义View
- Android网络编程(二)HttpClient与HttpURLConnection
- Spring Batch入门篇
- Android网络编程(三)Volley用法全解析
- Android网络编程(八)源码解析OkHttp中篇[复用连接池]
- Mybatis SqlSessionTemplate 源码解析
- MapperScannerConfigurer处理过程源码分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python源文件打包成可执行的exe应用,给你的代码变个身!
- Python 技术篇-ffmpeg.exe的安装及配置
- Python 库配置问题-"Couldn't find ffmpeg or avconv - defaulting to ffmpeg, but may not work",原因及解决办法
- 小白都能看懂的简单爬虫入门案例剖析(爬虫入门看它就够了!)
- Python 技术篇-音频mp3格式转wav格式,高保真
- Python3 模块
- Python 微信机器人-向好友发送名片、转发名片
- iOS多线程:GCD使用介绍
- 适用于各语言的二分查找算法,你get到了嘛?
- Theme preview
- “抽象类”到底抽不抽象?实例对比一看便知!
- C#索引器的实现、索引器和属性的异同对比,这些技能你get到了嘛?
- 我竟然用它搞懂了王者荣耀的技能释放机制!【C#委托】
- 使用docker-compose 搭建 lnmp
- Java接口也有坑?不容忽视!