jsonp跨域获取数据实现百度搜索
本菜鸡最近在写某个页面请求数据时,报了如下的错误。
Failed to load https://...:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:7070' is therefore not allowed access.
了解原因后,得知是由于跨域请求导致的,学习了一下跨域及同源策略相关知识后,写了个demo玩玩
简单聊聊跨域
要了解跨域,必须先了解浏览器同源策略,接下来搬运了一些大神的总结
什么是同源策略?
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
同源策略限制以下几种行为:
1.Cookie、LocalStorage 和 IndexDB 无法读取
2.DOM 和 Js对象无法获得
3.AJAX 请求不能发送
假设没有同源策略,那么我在A网站下的cookie就可以被任何一个网站拿到;那么这个网站的所有者,就可以使用我的cookie(也就是我的身份)在A网站下进行操作。同源策略可以算是 web 前端安全的基石,如果缺少同源策略,浏览器也就没有了安全性可言。
同源策略做了很严格的限制,但是在实际的场景中,又确实有很多地方需要突破同源策略的限制,也就是我们常说的跨域。
跨域的方法有很多(如接下来要玩的jsonp跨域,还有cors跨域资源共享,反向代理等等)。
使用jsonp跨域
由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而HTML的<script>
元素是一个例外。利用<script>
元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
示例代码
function handleResponse(response) {
alert(`You get the data : ${response}`)
}
const script = document.createElement('script')
script.src = 'http://somesite.com/json/?callback=handleResponse'
document.body.insertBefore(script, document.body.firstChild)
这里的callback回调函数很重要,动态添加在body中的script标签可以使用被加载的文件与HTML文件下的其他JS文件共享一个全局作用域。也就是说,<scritp>标签加载到的资源是可以被全局作用域下的函数所使用的!
玩一玩,写一个百度搜索框
百度有一个对外暴露的数据接口:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1
在chrome浏览器中打开百度主页,在开发者工具在 netkwork 可以找到
我们可以直接拿来使用,配合jsonp就能实现跨域获取输入框内容相关热点数据并点击跳转了,具体实现请看Github项目源码
实现效果:
页面结构非常简单,如图:
jsonp跨域实现代码
document.onkeyup = function () {
var val = text.value
var script = document.createElement('script')
script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${val}&cb=dosomething`;
document.body.appendChild(script)
}
function dosomething (data) {
var oUl = document.querySelector('#lists ul')
oUl.innerHTML = ''
data.s.map(function (html) {
var oLi = document.createElement('li')
oLi.innerHTML = html
oLi.onclick = function () {
window.location.href = `http://www.baidu.com/s?wd=${html}`
}
oUl.appendChild(oLi)
})
}
仅仅是一个利用jsonp实现跨域的简单小demo,便于和我一样的新手学习,其它结构和样式文件就不一一列出来了,可以到我下载我的完整项目查看
完整项目地址:Github:baidu_demo
参考文章:
jsonp跨域获取数据实现百度搜索的更多相关文章
- jsonp跨域获取数据小解
jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访 ...
- asp.net MVC jsonp跨域获取数据
public class JsonpResult : JsonResult { object _data = null; public JsonpResult() { } public JsonpRe ...
- 利用location.hash+iframe跨域获取数据详解
前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...
- jQuery之ajax的跨域获取数据
如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- XMLHTTPRequest对象不能跨域获取数据?!
写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一 ...
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- 使用JSONP跨域请求数据
下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.
- 各大搜索引擎智能提示API(JSONP跨域实现自动补全搜索建议)
---------------------------------------搜索引擎JSONP接口--------------------------------------------- 提示:U ...
随机推荐
- Gym - 101194H Great Cells
Problem H. Great Cells 题目链接:https://codeforces.com/gym/101194/attachments Input file: Standard Input ...
- 区间查询异或最大值——cf1100F,hdu6579(线性基)
hdu6579 题意初始时有n个数,现在有q次操作: 查询[l,r]内选择一些数使得异或和最大:在末尾加入一个数.题目强制在线. 思路对于i我们记录[1,i]每个基底最靠近i的位置和这个位置的值,然后 ...
- 洛谷P1879 [USACO06NOV]玉米田Corn Fields(状压dp)
洛谷P1879 [USACO06NOV]玉米田Corn Fields \(f[i][j]\) 表示前 \(i\) 行且第 \(i\) 行状态为 \(j\) 的方案总数.\(j\) 的大小为 \(0 \ ...
- jenkins之启动与关闭
jenkins可以通过内置的应用服务器或者借助其他应用服务器启动 目录 1.启动jenkins 2.关闭jenkins 3.重启jenkins 4.重新加载jenkins配置信息 1.启动jenkin ...
- HBase备份还原OpenTSDB数据之Export/Import(增量+全量)
前言 本文基于伪分布式搭建 hadoop+zookeeper+hbase+opentsdb之后,文章链接:https://www.cnblogs.com/yybrhr/p/11128149.html, ...
- JS 创建动态表格练习
创建动态表格 1.1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- 关于public private protected访问修饰符
这个似乎都是老生常谈了,特别是找工作第一轮笔试的时候很爱考这些,再罗列一次,特别要注意继承的情况: 默认状态:即是不加修饰符的时候,所谓的default状态,在类内部可以被访问,在相同的包下面 ...
- 结合process进程,实现进程之间的通讯Queue,稍微复杂的运用
#在父进程中创建两个子进程,一个往Queue写数据,一个从Queue里读数据 from multiprocessing import Queue,Process import time,random ...
- 查询SQLSERVER执行过的SQL记录(历史查询记录)(转)
原文链接:https://www.cnblogs.com/icycore/p/10493237.html 有的时候,需要知道近段时间SQLSERVER执行了什么语句,可以用下面的方法: SELECT ...
- 03 - Jmeter用户自定义变量CSV参数化以及断言的设置
设置断言 咱们还是先看一个图吧,由下图可以看出接口是请求成功了,但是请求数量比较少,还是比较方便看的,但是jmeter既然是压测工具,那么肯定不会发这么点儿请求的,如果请求数量比较庞大的话,我们仅仅凭 ...