ajax跨域

跨域產(chǎn)生的原因:

瀏覽器有一個(gè)很重要的概念——同源策略(Same-Origin Policy)。所謂同源是指憨奸,域名,協(xié)議凿试,端口相同。不同源的客戶端腳本(javascript那婉、ActionScript)在沒(méi)明確授權(quán)的情況下详炬,不能讀寫對(duì)方的資源。

ajax有一個(gè)同源策略傲醉,但咱們調(diào)用的接口來(lái)自于第三方網(wǎng)站,那這里必須跨域

什么情況下會(huì)產(chǎn)生跨域:

協(xié)議名://二級(jí)域名.一級(jí)域名.類型:端口號(hào)/目錄1/文件名?參數(shù)1=值&參數(shù)2=值2&參數(shù)3=值3

1.協(xié)議不同
2.端口不同
3.主域不同
4.主域相同呻引,子域不同
5.域名和ip

跨域解決方案

jsonp:前端+后端
CORS:服務(wù)端 ——CORS詳情
代理(服務(wù)端代理逻悠,客戶端代理)

ajax跨域錯(cuò)誤提示:

大部分報(bào)錯(cuò)韭脊,只要有這句話 'Access-Control-Allow-Origin' 那么差不就是跨域了

//錯(cuò)誤示例
Failed to load https://api.douban.com/v2/movie/search?q=%E7%BA%A2%E6%B5%B7%E8%A1%8C%E5%8A%A8: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.

vue代理實(shí)現(xiàn):

打開(kāi)vue腳手架->config->index.js沪羔,找到 dev: {

proxyTable: {
   '/v2':{
    target: 'https://api.douban.com',  //要代理的接口
    changeOrigin: true,  //實(shí)現(xiàn)跨域
    pathRewrite: {
      '^/v2': '/v2'
    }
   }

},

jsonp實(shí)現(xiàn)原理:動(dòng)態(tài)創(chuàng)建script標(biāo)簽 蔫饰,因?yàn)閟cript中的src有跨域能力

jsonp實(shí)現(xiàn)步驟:

前端實(shí)現(xiàn):

第一步:動(dòng)態(tài)創(chuàng)建script標(biāo)簽篓吁,并添加callback參數(shù)
第二步:要?jiǎng)?chuàng)建callback函數(shù) 例如:getdata

后端實(shí)現(xiàn):

第一步:接收瀏覽器傳遞過(guò)來(lái)的callback函數(shù)
例如:$callback=$_GET['callback'];
第二步:返回函數(shù)調(diào)用形式,其內(nèi)部的參數(shù)就是json
例如: echo $callback."(".$json.")";

jsonp缺點(diǎn):只支持 get請(qǐng)求
jsonp優(yōu)點(diǎn):兼容性比較好 兼容:IE5+

————————
CORS解決跨域
php 實(shí)現(xiàn)的cors跨域:header('Access-Control-Allow-Origin: *');

缺點(diǎn):只支持IE10+
優(yōu)點(diǎn):
1.前端無(wú)需改代碼冻押,
2.支持所有請(qǐng)求方式 包括:post,delete,put,get

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末盛嘿,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子狼渊,更是在濱河造成了極大的恐慌类垦,老刑警劉巖城须,帶你破解...
    沈念sama閱讀 221,576評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件糕伐,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡陪汽,警方通過(guò)查閱死者的電腦和手機(jī)挚冤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門训挡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)澜薄,“玉大人,你說(shuō)我怎么就攤上這事颊艳◇∧” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,017評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵戒悠,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我舟山,道長(zhǎng),這世上最難降的妖魔是什么累盗? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,626評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮若债,結(jié)果婚禮上符相,老公的妹妹穿的比我還像新娘。我一直安慰自己啊终,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,625評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布傲须。 她就那樣靜靜地躺著蓝牲,像睡著了一般。 火紅的嫁衣襯著肌膚如雪泰讽。 梳的紋絲不亂的頭發(fā)上昔期,一...
    開(kāi)封第一講書(shū)人閱讀 52,255評(píng)論 1 308
  • 那天佛玄,我揣著相機(jī)與錄音,去河邊找鬼欠动。 笑死,一個(gè)胖子當(dāng)著我的面吹牛圈驼,可吹牛的內(nèi)容都是我干的人芽。 我是一名探鬼主播萤厅,決...
    沈念sama閱讀 40,825評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼靴迫,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼惕味!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起玉锌,我...
    開(kāi)封第一講書(shū)人閱讀 39,729評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤名挥,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后主守,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體禀倔,經(jīng)...
    沈念sama閱讀 46,271評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,363評(píng)論 3 340
  • 正文 我和宋清朗相戀三年参淫,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了救湖。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,498評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡涎才,死狀恐怖鞋既,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情耍铜,我是刑警寧澤邑闺,帶...
    沈念sama閱讀 36,183評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站业扒,受9級(jí)特大地震影響检吆,放射性物質(zhì)發(fā)生泄漏舒萎。R本人自食惡果不足惜程储,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,867評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嫌蚤,春花似錦怕轿、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,338評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至皱蹦,卻和暖如春煤杀,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背沪哺。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,458評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工沈自, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辜妓。 一個(gè)月前我還...
    沈念sama閱讀 48,906評(píng)論 3 376
  • 正文 我出身青樓枯途,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親籍滴。 傳聞我的和親對(duì)象是個(gè)殘疾皇子酪夷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,507評(píng)論 2 359

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

  • 跨域方法:1、跨子域iframe2孽惰、JSONP缺點(diǎn):只支持get方法晚岭;后端代碼要調(diào)整3、CORS本地如何模擬跨域修...
    愛(ài)笑的瘋小妞閱讀 452評(píng)論 0 1
  • 題目1.什么是同源策略? 同源策略(Same origin Policy): 瀏覽器出于安全方面的考慮勋功,只允許與本...
    FLYSASA閱讀 1,727評(píng)論 0 6
  • 前端開(kāi)發(fā)中酝润,跨域使我們經(jīng)常遇到的一個(gè)問(wèn)題燎竖,也是面試中經(jīng)常被問(wèn)到的一些問(wèn)題,所以要销,這里构回,我們做個(gè)總結(jié)。小小問(wèn)題疏咐,不足...
    Nealyang閱讀 473評(píng)論 0 0
  • <轉(zhuǎn)>詳解跨域(最全的解決方案) 什么是跨域跨域纤掸,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的浑塞,...
    涅槃快樂(lè)是金閱讀 4,754評(píng)論 0 3
  • 詩(shī)/安依依 窗外夜色涼如美借跪,遙掛家鄉(xiāng)鏡明月。 離家已有過(guò)月半酌壕,遠(yuǎn)方小女思斷腸掏愁。 夢(mèng)寐以求將歸去歇由,愿君一切常安樂(lè)。
    安依依1閱讀 172評(píng)論 0 1