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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!