<fieldset id="qeq0s"></fieldset>

<abbr id="qeq0s"></abbr>

<ul id="qeq0s"></ul><strike id="qeq0s"><menu id="qeq0s"></menu></strike>

jsonp 解決跨域問題

wanghui 發布于2019-08-21 18:37 / 547人閱讀

摘要：最近網站添加了搜索圖書信息的功能，用到了豆瓣圖書直接輸入需要搜索的信息，會出現跨域問題的錯誤警告，在配置未成功，隨即轉用解決，相關函數如下創建標簽在函數內部實現包裹函數，因為要用到為全局變量函數調用之后，移除對應的標簽調用回調函數為通過獲

最近網站添加了搜索圖書信息的功能，用到了豆瓣圖書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跨域傳值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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