JSONP跨域

JSONP

全称:JSON with Padding,可用于解决主流浏览器的跨域数据访问的问题。

  • 通过script标签加载数据的方式去获取数据当做JS代码来执行。
  • 因为加载的数据是JSON格式,所以需要提前在页面上声明一个全局的函数,函数名通过接口传递参数的方式传给后台,后台解析到函数名后再原始数据上包裹这个函数的函数名,发送给前端(JSONP需要对应接口的后端的赔后才能实现)

代码如下:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跨域演示</title>
    <script src="index1.js"></script>
</head>
<body>
</body>
</html>

JS部分:

文件名jsonp1.js

function loadScript(url) {
   var script = document.createElement('script')
   script.src = url
   script.type = 'text/javascript'
   var head = document.querySelector('head')
   head.appendChild(script)
}
function jsonpCallback(data) {
   console.log(JSON.stringify(data))
}

后端逻辑,文件名为jsonp2.js

var url = require('url')
var http = require('http')
http.createServer(function (req, res) {
    var data = {
        name: "xiaoming"
    };
    var callbackName = url.parse(req.url, true).query.callback
    res.writeHead(200)
    res.end(`${callbackName}(${JSON.stringify(data)})`)
}).listen(3000, 'localhost')
console.log('请打开localhost:3000查看结果')

验证结果:


终端输入node jsonp2.js
打开localhost:3000
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 什么是同源策略 浏览器限制不同源的两个网站间脚本和文本的相互访问,只允许访问同源下的内容。所谓同源,就是指两...
    熊蛋子17阅读 3,926评论 1 6
  • 什么是同源策略 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995...
    YQY_苑阅读 2,682评论 0 0
  • 题目1: 什么是同源策略 同源策略(Same Origin Policy): 浏览器出于安全方面的考虑, 只允许与...
    cctosuper阅读 1,709评论 0 1
  • JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的...
    西瓜w阅读 5,737评论 0 1
  • 0. 前言 说到AJAX就会不可避免的面临两个问题。 AJAX以何种格式来交换数据? 第二个是跨域的需求如何解决?...
    公子七阅读 23,710评论 7 67