同源策略之 JSONP（含实践）

最新推荐文章于 2023-03-08 21:31:36 发布

秋子丫

最新推荐文章于 2023-03-08 21:31:36 发布

阅读量133

点赞数

分类专栏： JavaScript 文章标签： nodejs jsonp http ajax js

本文链接：https://blog.csdn.net/qq_41548644/article/details/118685972

版权

JavaScript 专栏收录该内容

16 篇文章 4 订阅

订阅专栏

JSONP 在过去是服务器与客户端跨域通信的常用方法，接下来简述做法，并使用 Node 进行演示。

做法

第一步

网页添加一个 <script> 元素，向服务器请求一个脚本，这不受同源政策限制，可以跨域请求。

<script src="http://localhost:8082/jsonpTest?callback=getJsonpData"></script>

注意，请求脚本网址有一个 callback 参数（?callback=getJsonpData），用来告诉服务器，客户端的回调函数名称（getJsonpData）。

第二步

服务器收到请求后，拼接一个字符串，将 JSON 数据放在函数名里面，作为字符串返回（getJsonpData({...})）。

response.send(`${callback}(${JSON.stringify(data)})`)

第三步

客户端将服务器返回的字符串作为代码进行解析。这时，客户端只要定义了 getJsonpData 函数，就能在函数体内拿到服务器返回的 JSON 数据。

演示及完整代码

Node 代码

const express = require('express')
const app = express()

app.get('/jsonpTest', (request, response) => {
  const data = {
    name: 'qiuzi',
    age: 5,
    city: 'guangzhou'
  }

  // 获取请求中的回调函数名称
  const callback = request.query.callback
  // 通过返回 callback(JSON.stringify(data)) 触发客户端的回调函数执行
  response.send(`${callback}(${JSON.stringify(data)})`)
})

const server = app.listen(8082, () => {
  console.log('---------- Server is listening on port 8082 -----------')
})

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSONP Demo</title>
</head>
<body>
  <h1>JSONP Demo</h1>
  <script>
    function getJsonpData(data) {
      console.log('data: ', data)
    }
  </script>

  <script src="http://localhost:8082/jsonpTest?callback=getJsonpData"></script>
</body>
</html>

秋子丫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
同源策略之 JSONP（含实践）

JSONP 在过去是服务器与客户端跨域通信的常用方法，接下来简述做法，并使用 Node 进行演示。做法第一步网页添加一个 <script> 元素，向服务器请求一个脚本，这不受同源政策限制，可以跨域请求。<script src="http://localhost:8082/jsonpTest?callback=getJsonpData"></script>注意，请求脚本网址有一个 callback 参数（?callback=getJsonpData），用来告.
复制链接

扫一扫

专栏目录