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>标签加载到的资源是能够被全局做用域下的函数所使用的！

玩一玩，写一个百度搜索框

百度有一个对外暴露的数据接口：sp0.baidu.com/5a1Fazu8AA5…

在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

参考文章：

1. 前端常见跨域解决方案（全）
2. JSONP和CORS实现跨源请求
3. 不再学AJAX了！（三）跨域获取资源 ② - JSONP & CORS
4. jsonp跨域请求详解——从繁至简