jsonp 解决跨域问题
最近网站添加了搜索图书信息的功能,用到了豆瓣图书API:
https://api.douban.com/v2/book/search?q=${query}
直接输入需要搜索的信息,会出现跨域问题的错误警告,在 nginx
配置未成功,随即转用jsonp
解决,相关函数如下:
// jsonp.js export function getJSONP(url, cb) { if (url.indexOf('?') === -1) { url += '?callback=responseHandler'; } else { url += '&callback=responseHandler'; } // 创建script 标签 var script = document.createElement('script'); // 在函数内部实现包裹函数,因为要用到 cb // responseHandler 为全局变量 window.responseHandler = function (json) { try { cb(json) } finally { // 函数调用之后,移除对应的标签 script.parentNode.removeChild(script); } } script.setAttribute('src', url) document.body.appendChild(script); }
调用:
import { getJSONP } from "../../utils/jsonp"; const onSearch = async (query) => { const url = `https://api.douban.com/v2/book/search?q=${query}`; getJSONP(url, e => { // 回调函数 // e 为通过jsonp获取的数据 console.log(e) }) }
相关推荐
zmosquito 2020-05-10
somebodyoneday 2020-04-22
fengchao000 2020-04-22
fengchao000 2020-04-11
fengchao000 2020-03-05
xiaouncle 2020-02-13
fengchao000 2020-06-17
adonislu 2020-05-16
adonislu 2020-05-10
Richardxx 2020-03-07
somebodyoneday 2020-03-06
somebodyoneday 2020-02-16
baijinswpu 2020-01-29
fengchao000 2020-01-10
fengchao000 2019-12-25
newthon 2019-12-23
somebodyoneday 2013-07-11