jsonp 解决跨域问题

前端之家收集整理的这篇文章主要介绍了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)
    })
}

参考:https://www.jianshu.com/p/1f3...

原文链接:https://www.f2er.com/json/288637.html

猜你在找的Json相关文章