跨域產(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