jsonp 解決跨域問題

wanghui 發(fā)布于2019-08-21 18:37 / 535人閱讀

摘要：最近網(wǎng)站添加了搜索圖書信息的功能，用到了豆瓣圖書直接輸入需要搜索的信息，會出現(xiàn)跨域問題的錯誤警告，在配置未成功，隨即轉(zhuǎn)用解決，相關(guān)函數(shù)如下創(chuàng)建標(biāo)簽在函數(shù)內(nèi)部實現(xiàn)包裹函數(shù)，因為要用到為全局變量函數(shù)調(diào)用之后，移除對應(yīng)的標(biāo)簽調(diào)用回調(diào)函數(shù)為通過獲

最近網(wǎng)站添加了搜索圖書信息的功能，用到了豆瓣圖書API：

https://api.douban.com/v2/book/search?q=${query}

直接輸入需要搜索的信息，會出現(xiàn)跨域問題的錯誤警告，在 nginx 配置未成功，隨即轉(zhuǎn)用jsonp解決，相關(guān)函數(shù)如下：

// jsonp.js
export function getJSONP(url, cb) {
    if (url.indexOf("?") === -1) {
        url += "?callback=responseHandler";
    } else {
        url += "&callback=responseHandler";
    }
    // 創(chuàng)建script 標(biāo)簽
    var script = document.createElement("script");
    // 在函數(shù)內(nèi)部實現(xiàn)包裹函數(shù)，因為要用到 cb
    // responseHandler 為全局變量
    window.responseHandler = function (json) {
        try {
            cb(json)
        } finally {
            // 函數(shù)調(diào)用之后，移除對應(yīng)的標(biāo)簽
            script.parentNode.removeChild(script);
        }
    }
    script.setAttribute("src", url)
    document.body.appendChild(script);
}

調(diào)用：

import { getJSONP } from "../../utils/jsonp";

const onSearch = async (query) => {
    const url = `https://api.douban.com/v2/book/search?q=${query}`;
    getJSONP(url, e => {
        // 回調(diào)函數(shù)
        // e 為通過jsonp獲取的數(shù)據(jù)
        console.log(e)
    })
}

參考：https://www.jianshu.com/p/1f3...

云服務(wù)器 GPU云服務(wù)器 jsonp 跨域 jsonp 跨域亂碼 jsonp跨域請求 ajax jsonp跨域傳值

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90651.html

相關(guān)文章

JS 跨域原因及其解決方案

摘要：產(chǎn)生跨域問題的原因跨域問題是瀏覽器同源策略限制，當(dāng)前域名的只能讀取同域下的窗口屬性。比如，其中是協(xié)議名，是子域名，是主域名，端口號是，當(dāng)在在頁面中從一個請求數(shù)據(jù)時，如果這個的協(xié)議名子域名主域名端口號任意一個有一個不同，就會產(chǎn)生跨域問題。產(chǎn)生跨域問題的原因跨域問題是瀏覽器同源策略限制，當(dāng)前域名的js只能讀取同域下的窗口屬性。跨域問題產(chǎn)生的場景當(dāng)要在在頁面中使用js獲取其他網(wǎng)...

voidking 2019-08-21 10:29 評論0 收藏0
jsonp跨域資源引起CORB

摘要：三原因分析瀏覽器在加載可以跨域資源時，在將資源載入頁面時對其進行識別與攔截等一系列處理。從而禁用了客戶端瀏覽器的類型嗅探行為即把不可執(zhí)行的類型轉(zhuǎn)變?yōu)榭蓤?zhí)行的類型。一、jsonp的使用 jsonp是實現(xiàn)跨域請求數(shù)據(jù)的一種方式，解決了由于瀏覽器同源策略帶來的安全限制；雖然瀏覽器有同源策略的限制，但對于一些特殊的dom元素卻可引用非同源資源，例如等，下面結(jié)合例子說明： jquery直接發(fā)...

wuyangnju 2019-08-16 15:23 評論0 收藏0
老生常談的跨域問題JSONP解決方式

摘要：解決方案跨域問題可以說在前端方面不可避免，但同源策略畢竟在保護網(wǎng)絡(luò)信息安全方面起到很大的作用。起因說起來源...今天去茶水間倒水時，偶然聽到公司面試官在問面試者前端跨域的如何解決。我心中默默想了一想，啪啪啪瞬間想出幾個關(guān)鍵詞，iframe，cors，同源策略，jsonp...轉(zhuǎn)念一想，雖然這是很常見的面試題，然而我在開發(fā)過程中，還真沒有用過jsonp這種方式...就連原理也說不好。...

asoren 2019-08-20 14:28 評論0 收藏0
老生常談的跨域問題JSONP解決方式

摘要：解決方案跨域問題可以說在前端方面不可避免，但同源策略畢竟在保護網(wǎng)絡(luò)信息安全方面起到很大的作用。起因說起來源...今天去茶水間倒水時，偶然聽到公司面試官在問面試者前端跨域的如何解決。我心中默默想了一想，啪啪啪瞬間想出幾個關(guān)鍵詞，iframe，cors，同源策略，jsonp...轉(zhuǎn)念一想，雖然這是很常見的面試題，然而我在開發(fā)過程中，還真沒有用過jsonp這種方式...就連原理也說不好。...

jemygraw 2019-08-01 16:20 評論0 收藏0
AJAX跨域完全講解

摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時候其實就已經(jīng)有過跨域的問題的了，當(dāng)時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經(jīng)有過AJAX跨域...

alexnevsky 2019-08-22 15:00 評論0 收藏0
AJAX跨域完全講解

摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時候其實就已經(jīng)有過跨域的問題的了，當(dāng)時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經(jīng)有過AJAX跨域...

i_garfileo 2019-08-15 14:27 評論0 收藏0