跨域

解決跨域訪問,最常用有三種辦法

  • CORS
  • jsonp
  • 代理

CORS

cross origin resource share垢揩,跨資源共享

  • 主要是站在服務(wù)端的角度骗炉,對外開放訪問權(quán)限
  • 要求卵佛,我們需要有權(quán)限去編寫(修改)服務(wù)端的代碼
  • 同時,在瀏覽器端茧痕,不用寫任何代碼

注意:

Cors插件不是真正的解決方案野来,只是一個臨時,在開發(fā)的時候踪旷,可以用一用而已曼氛。
項目上線的時候,不可能使用這種方案令野。

jsonp

json with packing搪锣,json的一個包裝,是一種協(xié)議彩掐,協(xié)議用來傳遞數(shù)據(jù)的构舟。是途徑。好比是傳遞情報的方式堵幽。

原理:

因為script標簽 本身是可以進行跨域訪問的狗超,我們利用這一點,創(chuàng)建一個方法朴下,動態(tài)的去添加一個script標簽努咐,并指定url,當請求成功殴胧,服務(wù)端返回一個js字符串渗稍,作為script標簽內(nèi)容,可以直接被js執(zhí)行

我們可以通過在瀏覽器端定義一個函數(shù)callback团滥,傳遞給服務(wù)端竿屹,服務(wù)端可以獲取這個callback,并把要返回的數(shù)據(jù)灸姊,作為這個callback的參數(shù)拱燃,返回callback,

function addScript(url) {
    let script = docunment.creatElement('script');
    script.src = url;
    documnet.body.appendChild(script);
}
function cb(res){
    console.log(res);
}
addScript('網(wǎng)址?callback=cb');

注意

要實現(xiàn)jsonp力惯,在服務(wù)端和瀏覽器端都需要編寫相應(yīng)的代碼碗誉。
Jsopn的原理是基于script標簽,它==只能實現(xiàn)get跨域==父晶,不能實現(xiàn)post跨域哮缺。[注意]

jsonp和json的區(qū)別,

  • Json甲喝,javascript object notation尝苇,js對象表示,是一個種格式,本質(zhì)是字符串茎匠。是數(shù)據(jù)。好比是情報押袍。
  • Jsonp诵冒,json with packing,json的一個包裝谊惭,是一種協(xié)議汽馋,協(xié)議用來傳遞數(shù)據(jù)的。是途徑圈盔。好比是傳遞情報的方式豹芯。

代理

因為cros和jsonp都是需要后端有配合代碼,所以當后端沒有配合代碼的時候驱敲,我們可以自己寫一個后端铁蹈,然后替前端去請求數(shù)據(jù)

我們可以把要請求的接口作為數(shù)據(jù)發(fā)送給 作為代理的后端

$.ajax({
    url: '/daili',
    type: 'get',
    data: '接口地址',
    datatype: 'json',
    seccess: function(res){
        console.log(res);
    }
})

接著后端獲取到發(fā)送的數(shù)據(jù)

app.get('/daili', (req, res) => {
    let url = req.query.url;
    http.get(url, (response) => {
        let data = '';
        response.on('data', (chunk) => {
            data += chunk;
        });
        response.on('end', () => {
            res.json(JSON.parse(data));
        })
    })
})
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市众眨,隨后出現(xiàn)的幾起案子握牧,更是在濱河造成了極大的恐慌,老刑警劉巖娩梨,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件沿腰,死亡現(xiàn)場離奇詭異,居然都是意外死亡狈定,警方通過查閱死者的電腦和手機颂龙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纽什,“玉大人措嵌,你說我怎么就攤上這事÷郑” “怎么了铅匹?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長饺藤。 經(jīng)常有香客問我包斑,道長,這世上最難降的妖魔是什么涕俗? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任罗丰,我火速辦了婚禮,結(jié)果婚禮上再姑,老公的妹妹穿的比我還像新娘萌抵。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布绍填。 她就那樣靜靜地躺著霎桅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪讨永。 梳的紋絲不亂的頭發(fā)上滔驶,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天,我揣著相機與錄音卿闹,去河邊找鬼揭糕。 笑死,一個胖子當著我的面吹牛锻霎,可吹牛的內(nèi)容都是我干的著角。 我是一名探鬼主播,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼旋恼,長吁一口氣:“原來是場噩夢啊……” “哼吏口!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起冰更,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤锨侯,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后冬殃,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體囚痴,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年审葬,在試婚紗的時候發(fā)現(xiàn)自己被綠了深滚。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡涣觉,死狀恐怖痴荐,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情官册,我是刑警寧澤生兆,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布,位于F島的核電站膝宁,受9級特大地震影響鸦难,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜员淫,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一合蔽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧介返,春花似錦拴事、人聲如沸沃斤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽衡瓶。三九已至,卻和暖如春牲证,著一層夾襖步出監(jiān)牢的瞬間哮针,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工从隆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人缭裆。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓键闺,卻偏偏與公主長得像,于是被迫代替她去往敵國和親澈驼。 傳聞我的和親對象是個殘疾皇子辛燥,可洞房花燭夜當晚...
    茶點故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內(nèi)容

  • http協(xié)議 Resource,URL缝其,Request挎塌,Response,Headers http 請求的是資源R...
    Sharise_Mo佩珊閱讀 684評論 0 4
  • 1. 什么是同源策略 瀏覽器限制不同源的兩個網(wǎng)站間腳本和文本的相互訪問内边,只允許訪問同源下的內(nèi)容榴都。所謂同源,就是指兩...
    熊蛋子17閱讀 683評論 1 6
  • 題目1.什么是同源策略? 同源策略(Same origin Policy): 瀏覽器出于安全方面的考慮漠其,只允許與本...
    FLYSASA閱讀 1,708評論 0 6
  • 1. 什么是跨域嘴高? 跨域一詞從字面意思看,就是跨域名嘛和屎,但實際上跨域的范圍絕對不止那么狹隘拴驮。具體概念如下:只要協(xié)議...
    w_zhuan閱讀 510評論 0 0
  • 丁酉年,生肖兔者柴信,沖太歲套啤,諸事不宜。 丁酉年随常,雙春閏月桃花年潜沦。 在沒有進入2017年的時候,看到這樣的年歲信息绪氛,心...
    冰果真多閱讀 173評論 1 3