微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐