跨域 - JSONP

目录

  • 1,介绍
  • 2,示例
    • 基础示例:
    • 封装示例
  • 3,缺点

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

1,介绍

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

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 请求

以上。

你可能感兴趣的:(浏览器,前端,javascript,跨域,jsonp)