Jsonp跨域請求

tainzhi 發(fā)布于2019-08-20 17:49 / 476人閱讀

摘要：實(shí)現(xiàn)跨域請求的原理簡單的說，就是動態(tài)創(chuàng)建標(biāo)簽，然后利用的不受同源策略約束來跨域獲取數(shù)據(jù)。回調(diào)函數(shù)的名字一般是在請求中指定的。

怎么處理跨域問題呢？相信在看了這篇文章，您就理解了什么是跨域，怎么處理跨域問題了。

一、同源策略

要理解跨域，先要了解一下“同源策略”。所謂同源是指，域名，協(xié)議，端口相同。所謂“同源策略“，簡單的說就是基于安全考慮，當(dāng)前域不能訪問其他域的東西。

在同源策略下，在某個服務(wù)器下的頁面是無法獲取到該服務(wù)器以外的數(shù)據(jù)的。例如我們在自己的網(wǎng)站通過ajax去獲取豆瓣上https://developers.douban.com...提供的接口數(shù)據(jù)。這里我們以搜索圖書為例，參數(shù)鏈接為：https://api.douban.com/v2/boo...，該鏈接中數(shù)據(jù)為JSON格式，如下：

我通過如下代碼去訪問該數(shù)據(jù)：




    
    ajax

上述程序運(yùn)行時(shí)會報(bào)錯：

但的src（獲取圖片），的href（獲取css）， 三、jQuery封裝JSONP

對于經(jīng)常用jQuery的開發(fā)者來說，能注意到j(luò)Query封裝的$.ajax中有一個dataType屬性，如果將該屬性設(shè)置成dataType:"jsonp"，就能實(shí)現(xiàn)JSONP跨域了。需要了解的一點(diǎn)是，雖然jQuery將JSONP封裝在$.ajax中，但是其本質(zhì)與$.ajax不一樣。

通過jQuery的$.ajax實(shí)現(xiàn)跨域的代碼參考如下：




    
    jQuery實(shí)現(xiàn)JSONP

注：本文為轉(zhuǎn)載
原文地址：輕松搞定JSONP跨域請求

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

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

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

相關(guān)文章

JSONP跨域訪問API接口深入理解

摘要：說明關(guān)于跨域問題的解決方案多達(dá)七八種，你不要說哪有這么多，我不跟你較真哈，你也別跟我較真哈自行百度或這里不會跟你說那么多種只說使用最多的一種你要非說用的不是最多的我不信哦你信好了哈哈你開心就好關(guān)于跨域?yàn)g覽器的同源策略要了解什么是跨域你需要了說明關(guān)于跨域問題的解決方案多達(dá)七、八種，你不要說哪有這么多，我不跟你較真哈，你也別跟我較真哈, ?！自行百度或 Google, 這里不會跟你...

tunny 2019-06-28 18:28 評論0 收藏0
jsonp 跨域原理分析

摘要：為請求指定一個回調(diào)函數(shù)名。這主要用來讓生成一個獨(dú)特的函數(shù)名，這樣管理請求更容易，也能方便地提供回調(diào)函數(shù)和錯誤處理。在回調(diào)函數(shù)中，通常我們只需通過判斷請求是否完成，如果已完成，再根據(jù)判斷是否是一個成功的響應(yīng)。本篇文章借鑒自博客園文章原文地址 AJAX即Asynchronous Javascript And XML（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的...

scq000 2019-08-20 17:16 評論0 收藏0
再也不學(xué)AJAX了！（三）跨域獲取資源 ② - JSONP & CORS

摘要：瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當(dāng)我們需要使用跨域請求資源時(shí)，同源策略又會成為開發(fā)者的阻礙。我們之前提到過，如果想要繞過瀏覽器同源策略，實(shí)現(xiàn)使用技術(shù)跨域獲取資源，需要服務(wù)端和客戶端的協(xié)同合作。瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當(dāng)我們需要使用AJAX跨域請求資源時(shí)，同源策略又會成為開發(fā)者的阻礙。在本文中，我們會簡單介紹需...

enda 2019-08-21 17:55 評論0 收藏0
004. 前端跨域資源請求： JSONP/CORS/反向代理

摘要：同源策略瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方資源。不受同源策略限制的跨域資源的引入是允許的頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。1.什么是跨域資源請求？ https://www.cnblogs.com/niuli1987/p/10252214.html 同源：如果兩個頁面的協(xié)議，端口（如果有指定）和域名都相同，則兩個頁面具有相...

番茄西紅柿 2019-04-22 16:12 評論0 收藏0
jsonp跨域資源引起CORB

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

wuyangnju 2019-08-16 15:23 評論0 收藏0
前端跨域資源請求： JSONP/CORS/反向代理

摘要：此時(shí)完成的跨域代理配置僅僅是在開發(fā)環(huán)境下生效，到了生產(chǎn)環(huán)境下如果是放到服務(wù)器上則還需要借助的反向代理來進(jìn)行跨域的代理。跨域指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本，它是由瀏覽器的同源策略造成的，是瀏覽器對 JavaScript 施加的安全限制。同源就是指域名，協(xié)議，端口均相同。兩個網(wǎng)域若域名、協(xié)議、端口任一不同則二者的通信就出現(xiàn)了跨域問題，前端的跨域問題普通存在于兩個階段，一個是開發(fā)環(huán)境...

番茄西紅柿 2019-04-23 11:40 評論0 收藏0