jsonp 解决跨域问题

wanghui 发布于2019-08-21 18:37 / 534人阅读

摘要：最近网站添加了搜索图书信息的功能，用到了豆瓣图书直接输入需要搜索的信息，会出现跨域问题的错误警告，在配置未成功，随即转用解决，相关函数如下创建标签在函数内部实现包裹函数，因为要用到为全局变量函数调用之后，移除对应的标签调用回调函数为通过获

最近网站添加了搜索图书信息的功能，用到了豆瓣图书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...

GPU云服务器云服务器 jsonp 跨域 jsonp 跨域乱码 jsonp跨域请求 ajax jsonp跨域传值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90651.html

JS 跨域原因及其解决方案

摘要：产生跨域问题的原因跨域问题是浏览器同源策略限制，当前域名的只能读取同域下的窗口属性。比如，其中是协议名，是子域名，是主域名，端口号是，当在在页面中从一个请求数据时，如果这个的协议名子域名主域名端口号任意一个有一个不同，就会产生跨域问题。产生跨域问题的原因跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。跨域问题产生的场景当要在在页面中使用js获取其他网...

voidking 2019-08-21 10:29 评论0 收藏0
jsonp跨域资源引起CORB

摘要：三原因分析浏览器在加载可以跨域资源时，在将资源载入页面时对其进行识别与拦截等一系列处理。从而禁用了客户端浏览器的类型嗅探行为即把不可执行的类型转变为可执行的类型。一、jsonp的使用 jsonp是实现跨域请求数据的一种方式，解决了由于浏览器同源策略带来的安全限制；虽然浏览器有同源策略的限制，但对于一些特殊的dom元素却可引用非同源资源，例如等，下面结合例子说明： jquery直接发...

wuyangnju 2019-08-16 15:23 评论0 收藏0
老生常谈的跨域问题JSONP解决方式

摘要：解决方案跨域问题可以说在前端方面不可避免，但同源策略毕竟在保护网络信息安全方面起到很大的作用。起因说起来源...今天去茶水间倒水时，偶然听到公司面试官在问面试者前端跨域的如何解决。我心中默默想了一想，啪啪啪瞬间想出几个关键词，iframe，cors，同源策略，jsonp...转念一想，虽然这是很常见的面试题，然而我在开发过程中，还真没有用过jsonp这种方式...就连原理也说不好。...

asoren 2019-08-20 14:28 评论0 收藏0
老生常谈的跨域问题JSONP解决方式

摘要：解决方案跨域问题可以说在前端方面不可避免，但同源策略毕竟在保护网络信息安全方面起到很大的作用。起因说起来源...今天去茶水间倒水时，偶然听到公司面试官在问面试者前端跨域的如何解决。我心中默默想了一想，啪啪啪瞬间想出几个关键词，iframe，cors，同源策略，jsonp...转念一想，虽然这是很常见的面试题，然而我在开发过程中，还真没有用过jsonp这种方式...就连原理也说不好。...

jemygraw 2019-08-01 16:20 评论0 收藏0
AJAX跨域完全讲解

摘要：跨域完全讲解今天在慕课网上学习了跨域完全讲解我在收集面试题的时候其实就已经有过跨域的问题的了，当时候知道了为什么会存在跨域，以及跨域解决的方案有哪些，今天随着课程的学习，又加深了跨域的理解，以此记录下来。 AJAX跨域完全讲解今天在慕课网上学习了AJAX跨域完全讲解：https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域...

alexnevsky 2019-08-22 15:00 评论0 收藏0
AJAX跨域完全讲解

摘要：跨域完全讲解今天在慕课网上学习了跨域完全讲解我在收集面试题的时候其实就已经有过跨域的问题的了，当时候知道了为什么会存在跨域，以及跨域解决的方案有哪些，今天随着课程的学习，又加深了跨域的理解，以此记录下来。 AJAX跨域完全讲解今天在慕课网上学习了AJAX跨域完全讲解：https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域...

i_garfileo 2019-08-15 14:27 评论0 收藏0