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