jsonpGet, 跨域如此简单

BoYang 发布于2019-08-26 12:12 / 3251人阅读

摘要：源码我们经常在项目中遇到跨域问题，比如有时候在做个人项目的时候，我们需要请求第三方的一些数据，比如请求豆瓣公开的数据，或则音乐开放的数据等等。但是毫无疑问，在我们的应用中直接请求这些将出现跨域问题。比如，向豆瓣公开发送请求。

jsonGet源码

我们经常在项目中遇到跨域问题，比如有时候在做个人项目的时候，我们需要请求第三方的一些数据，比如请求豆瓣公开api的数据，或则qq音乐开放api 的数据等等。但是毫无疑问，在我们的web应用中直接请求这些api将出现跨域问题。所以笔者心血来潮写了个插件—— jsonpGet。我们可以通过它来向跨域api发送get请求。下面直入主题，不多废话。

jsonpGet

简单易用的jsonp跨域请求插件，并且它返回一个promise。

安装

通过npm进行安装:

$ npm install jsonp-get

用法 jsonpGet(url, params?, callback?)

url (string) 要请求的地址

params (object) 参数，组成url的参数部分如：{a: 1, b: 2} 转为 ?a=1&b=2

callback (string) 前后端约定的字段名，默认值为callback（通常为此值），用来携带回调。

demo

比如，向豆瓣公开api发送请求。我们可以在then方法的回调中处理我们的数据，十分方便。

import jsonpGet from "jsonp-get"

let url = "https://api.douban.com/v2/movie/search"
let params = { tag: "喜剧" }

jsonpGet(url, params)
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

/* Network
*
* Request URL: https://api.douban.com/v2/movie/search?tag=%E5%96%9C%E5%89%A7&callback=myback
* Request Method: GET
* Status Code: 200 OK
*/

/* Console
*
*  {count: 20, start: 0, total: 200, subjects: Array(20), title: "带有标签 "喜剧" 的条目"}
*/

Github: jsonGet项目有什么问题，欢迎提 issues

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108219.html

同源策略和跨域方法

摘要：同源策略的控制者是浏览器，浏览器可以控制不同域之间的资源的访问或相互操作，但不控制自己对不同域之间的资源的操作和访问。同源与跨域一般情况下，禁止一个域从另一个域读取数据，却可以使用某些从其他域拿到的资源。比如说，允许一个域执行、渲染、应用从其他域获取到的脚本、图片、样式；同样，一个域可以展示从其他域获取的内容，比如在frame中显示html文档。网络资源也可以选择性的让其他域来读取...

魏宪会 2019-08-20 18:00 评论0 收藏0
再也不学AJAX了！（三）跨域获取资源 ③ - WebSocket & postMessag

摘要：一基于维基百科的定义，是一种在单个连接上进行全双工通讯的协议。让我们看看这个模型的具体实现下面是客户端告知服务端要升级为协议的报头下面是服务端向客户端返回的响应报头想知道这些报头中的字段中代表什么可以参考维基百科下的说明。让我们先简单回顾一下之前谈到的内容，AJAX是一种无页面刷新的获取服务器资源的混合技术。而基于浏览器的同源策略，不同域之间不可以发送AJAX请求。但是在某些情境下，...

liangzai_cool 2019-08-22 13:40 评论0 收藏0
HTML5跨域开发

摘要：默认情况下，跨域请求发起时候不包含，需要我们主动将的属性设为才行。出现错误时，会返回完整的栈，有利排查。不然如果出现错，响应头不包含这两个跨域标记，就会理所当然地不显示返回内容，也就无法看到错误描述，根本无法排查。首发我的博客 HTML5中提供了跨域加载数据的方法，让我们得以从JSONP或者Flash中介等各种绕行方案中解脱出来，更加顺畅地与服务器交流。另一方面，因为PHP...

xiaolinbang 2019-06-27 11:04 评论0 收藏0
如何替代即将淘汰的Flash方案？

摘要：下面介绍第二种方法降子域通信不支持时降子域通信不支持时，降子域通信由于和都是属于下的子域，同源策略在前端页面中判定依据是而不是。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由MarsBoy发表于云+社区专栏 | 导语 Web技术飞速发展的如今，我们在感受新技术带来的便捷和喜悦的同时，也时常在考虑着一个问题：老技术如何迁移。正如本文的主题一样，Flash技术在早年风靡在...

GHOST_349178 2019-04-23 13:18 评论0 收藏0