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

相关文章

AJAX是一种基于JavaScript和XML的技术,能够使网页实现异步交...
在网页开发中,我们常常需要通过Ajax从后端获取数据并在页面...
在前端开发中,经常需要循环JSON对象数组进行数据操作。使用...
AJAX(Asynchronous JavaScript and XML)是一种用于创建 We...
AJAX技术被广泛应用于现代Web开发,它可以在无需重新加载页面...
Ajax是一种通过JavaScript和HTTP请求交互的技术,可以实现无...