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...

相关推荐