Jsonp跨域請(qǐng)求

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

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

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

一、同源策略

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

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

我通過(guò)如下代碼去訪問(wèn)該數(shù)據(jù)：




    
    ajax

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

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

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

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




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

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

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

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

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

相關(guān)文章

JSONP跨域訪問(wèn)API接口深入理解

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

tunny 2019-06-28 18:28 評(píng)論0 收藏0
jsonp 跨域原理分析

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

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

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

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

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

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

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

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

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

番茄西紅柿 2019-04-23 11:40 評(píng)論0 收藏0