跨域 - JSONP

2023-12-26 06:02:40

目录

其他相关内容：
跨域 - CORS跨域资源共享
浏览器同源策略

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)

3，缺点

  • 严重影响响应数据的格式
    • 跨域情况下，需要返回 js 代码
    • 非跨域情况下，又得返回正常的 JSON 格式。
  • 只能使用 get 请求

以上。

文章来源:https://blog.csdn.net/qq_40147756/article/details/135201032
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。