跨域解决方案 - JSONP
1. 定义
在HTML 中, script 标签有两个个性质:
- script 标签可以不受同源策略的限制去访问服务器资源, 即script 标签不存在跨域问题
- script 加载的内容为JavaScript 代码时, 会立即执行一遍JavaScript 代码
我们利用这一性质从服务器中访问资源的方法叫做 JSONP
2. JSONP 解决跨域
express(app.js)
const express = require('express')
const log = console.log.bind(console)
const app = express()
app.get('/api/getuserinfo/jsonp', (request, response) => {
let query = request.query
let callback = query.callback
let name = 'oulae'
// 获取数据, 通过 jsonp 的方式传给前端
let s = `${callback}('${name}')`
response.send(s)
})
const main = () => {
let server = app.listen(2300, () => {
let host = server.address().address
let port = server.address().port
log(`应用实例，访问地址为 http://${host}:${port}`)
})
}
if (require.main === module) {
main()
}
html(crossOriginDemo.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跨域demo</title>
<style type="text/css">
.ajaxButton {
width: 100px;
height: 50px;
background: blue;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.userMoudle {
width: 300px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.name {
width: auto;
}
</style>
</head>
<body>
<div class="userMoudle">
<div class="name">用户姓名:</div>
<div class="nameInfo"></div>
</div>
<script>
const changeInfo = (name) => {
let ele = document.querySelector('.nameInfo')
ele.innerHTML = name
}
</script>
<script src="http://localhost:2300/api/getuserinfo/jsonp?callback=changeInfo"></script>
</body>
</html>
执行结果
打开HTML页面之后, 我们能看到页面执行了 changeInfo 函数, 并且参数是后端给定的, script 标签加载完成之后, 页面的内容也变更了.
3. 应用场景
这种方案最常见的应用场景就是加载JavaScript 库文件或JavaScript 操作文件
4. 代码演示
- github 地址:https://github.com/ouleWorld/studyDemo/tree/master/codeDevelopDemo/crossOrigin
- 拉取整个项目, 然后将expressDemo/app.js 替换为上述app.js 文件; crossOriginDemo.html替换为上述crossOriginDemo.html文件
- 运行expressDemo 后端模块
- 运行crossOriginDemo.html 文件
跨域解决方案 - JSONP的更多相关文章
- 前端跨域解决方案: JSONP的通俗解说和实践
对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...
- jquery跨域解决方案JSONP
1.在互联网中我们的计算机是通过IP来定位的,但是IP比较难记忆,因此通过domain name(域名)来取代IP 2.什么是跨域? (1)默认浏览器为了安全问题,禁止了xmlhttprequest跨 ...
- 彻底理解跨域解决方案JSONP
什么是同源策略? 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页 ...
- 跨域解决方案之JSONP，通过借助调用百度搜索的API了解跨域案例
跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...
- 第十四节：Asp.Net Core 中的跨域解决方案（Cors、jsonp改造、chrome配置）
一. 整体说明 1. 说在前面的话 早在前面的章节中,就详细介绍了.Net FrameWork版本下MVC和WebApi的跨域解决方案,详见:https://www.cnblogs.com/yaope ...
- cors跨域和jsonp劫持漏洞 和 同源策略和跨域请求解决方案
cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...
- asp.net web api2.0 ajax跨域解决方案
asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种. 一,ASP.NET Web API支持JSONP,分两种 1, ...
- jQuery(三) javascript跨域问题(JSONP解决)
加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
- JSON跨域解决方案收集
最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...
随机推荐
- 一步步打造QQ群发消息群发器
最近为了做公众号号推广,吸粉,然后加了几百个QQ群,感觉QQ群的群发效果还是不错的,一天能捞到100个粉丝左右,好的时候也有200个,少的时候几十个,但是由于太多的群了,手工一个个点击开来群发,几百个 ...
- 浅析Spring中AOP的实现原理——动态代理
一.前言 最近在复习Spring的相关内容,刚刚大致研究了一下Spring中,AOP的实现原理.这篇博客就来简单地聊一聊Spring的AOP是如何实现的,并通过一个简单的测试用例来验证一下.废话不 ...
- 【源码】RingBuffer（二）——消费者
消费者如何读取数据? 前一篇是生产者的处理,这一篇讲消费者的处理 我们都知道,消费者无非就是不停地从队列中读取数据,处理数据.但是与BlockedQueue不同的是,RingBuffer的消费者不会对 ...
- spring-boot如何去获取前端传递的参数
本文主要讨论spring-boot如何获取前端传过来的参数,这些参数主要有两大类,一类是URL里的参数,一个是请求body里的参数 url里的参数 通过url里传过来的参数一般有三种方式,下面我们来看 ...
- [hdu5372 Segment Game]树状数组
题意:有两种操作:(1)插入线段,第i次插入的线段左边界为Li,长度为i (2)删除线段,删除第x次插入的线段.每次插入线段之前询问有多少条线段被它覆盖. 思路:由于插入的线段长度是递增的,所以第i次 ...
- python 一个模块找不到的错误：ModuleNotFoundError
阿刁是一个自动化测试用例,从一出生他就被赋予终生使命,去测试一个叫登录的过程是否合理.他一直就被关在一个小黑屋里面,从来也没有出去过,小黑屋里还被关着其他的同胞,他们身上都捆着两个小袋子. 小黑屋里很 ...
- webpack3 项目升级 webpack4
由于 vue-cli 2 构建的项目是基于 webpack3,所以只能自己动手改动,至于升级 webpack4之后提升的编译速度以及各种插件自己去体验. 修改配置 1.替换插件 extract-tex ...
- python之导入模块的方法
一.导入标准库模块 1.第一种方式: 可以通过以下方法导入 import time 当使用时间模块的sleep方法时可以使用 time.sleep(2) 2.第二种方式: 当只想使用sleep函数时, ...
- Hadoop2.8.1完全分布式环境搭建
前言 本文搭建了一个由三节点(master.slave1.slave2)构成的Hadoop完全分布式集群(区别单节点伪分布式集群),并通过Hadoop分布式计算的一个示例测试集群的正确性. 本文集群三 ...
- 5-JVM常用的命令
JVM常用的命令 jps :基础工具 查看JAVA进程PID. jps 命令用来查看所有 Java 进程,每一行就是一个 Java 进程信息. jps 仅查找当前用户的 Java 进程,而不是当前系统 ...