jsonp原理，封装，应用（vue项目）-优快云博客

本文深入探讨了JSONP(JSON with Padding)的工作原理及其在解决跨域数据访问问题上的应用。通过利用HTML的<script>元素特性，JSONP允许网页获取来自不同源的动态JSON数据，提供了一种绕过同源策略限制的方法。文章还提供了JSONP的封装实现及应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsonp原理

JSON是一种轻量级的数据传输格式。

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

jsonp封装　

import originJSONP from 'jsonp'

export default function jsonp (url, data, option) {
//url接口拼接
  url += (url.indexOf('?') < 0 ? '?' : '&') + prarm(data)
//es6的promise对象
  return new Promise((resolve, reject) => {
    originJSONP(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

function prarm (data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}

jsonp应用

export const options = {
  param: 'jsonpCallback'
}

import { commonParams, options } from './config'

　import jsonp from 'common/js/jsonp'

export function getRecommend () {
　　//请求地址
  const url = ''
//请求数据凭借

  const data = Object.assign({}, commonParams, {
    uin: 0
  })
  return jsonp(url, data, options)
}

data () {
    return {
      recommoneds: []
    }
  },
  created () {
    this._getRecommend()
  },
  methods: {
    _getRecommend () {
      getRecommend().then(res => {
        if (res.code === ERR_OK) {
          this.recommoneds = res.data
          console.log(res.data)
        }
      })
    }
  },

很简单的一个跨域拿数据

转载于:https://www.cnblogs.com/webPang/p/8669700.html