跨域 - JSONP

下雪天的夏风

已于 2023-12-26 02:11:27 修改

阅读量921

点赞数 24

分类专栏：浏览器文章标签：前端 javascript 跨域 jsonp

于 2023-12-26 01:59:48 首次发布

本文链接：https://blog.csdn.net/qq_40147756/article/details/135201032

版权

浏览器专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1，介绍

为了解决跨域请求，可以使用 form 表单提交和 CORS 跨域资源共享。但还有一些有 src 属性的 HTML标签也可以跨域访问资源，比如 img 和 script。

JSONP 就是利用 script 标签来实现跨域的。

当通过 script 标签发送请求时，服务器会响应一段 js 代码。这段代码是一个函数调用，函数需要在客户端定义好，服务器将响应数据作为参数传递即可。

2，示例

基础示例：

客户端

<!DOCTYPE html>
<html lang="en">
  <body>
    <script>
      function callbackJSONP(data) {
        console.log(data)
      }
    </script>
    <script src="http://localhost:3000/api/list"></script>
  </body>
</html>

服务端

var Koa = require('koa')
var Router = require('koa-router')

var app = new Koa()
var router = new Router()

router.get('/api/list', (ctx, next) => {
  const result = {
    code: 200,
    total: 100,
    data: [{ id: 1, name: '下雪天的夏风', want: '求关注' }]
  }
  // 非必须，只是告知客户端返回的内容的类型。
  ctx.set('content-type', 'text/javascript')
  ctx.body = `callbackJSONP(${JSON.stringify(result)})`
})

app.use(router.routes())
app.listen(3000)

封装示例

<!DOCTYPE html>
<html lang="en">
  <body>
    <button id="btn">获取数据</button>
    <script>
      function callbackJSONP(data) {
        console.log(data)
      }

      function jsonp(url) {
        const script = document.createElement('script')
        script.src = `${url}?callbackJSONP` // 告知服务端定义的函数名
        script.onload = function () {
          script.remove()
        }
        document.body.appendChild(script)
      }

      const btn = document.querySelector('#btn')
      btn.addEventListener('click', function () {
        jsonp('http://localhost:3000/api/list')
      })
    </script>
  </body>
</html>

var Koa = require('koa')
var Router = require('koa-router')

var app = new Koa()
var router = new Router()

router.get('/api/list', (ctx, next) => {
  const result = {
    code: 200,
    total: 100,
    data: [{ id: 1, name: '下雪天的夏风', want: '求关注' }]
  }
  ctx.set('content-type', 'text/javascript')
  ctx.body = `${ctx.querystring}(${JSON.stringify(result)})`
})

app.use(router.routes())
app.listen(3000)