當下流行的前后端分離專案，常遇跨域問題，現從兩點，解決跨域問題
1.跨域本質：由于瀏覽器的同源策略
同源策略本是瀏覽器最基本的安全功能，是為了防止從一個域上加載另一個域上的資訊，舉個例子：A有一個百寶箱，B有一個百寶箱，各自的百寶箱隨便取，但A要是取B的，或者B要是取A的，就會被拒絕
當協議，域名，埠其中某一個不一致的時候，就會產生跨域問題
2.前后端分離專案容易產生的跨域問題（常常是埠沖突）
vue解決前后端沖突問題，最版本（4.0）后，生成的前端專案會有這樣的一個檔案ui\config\index.js，之前的版本也有直接在專案下新建vue.config.js，但解決的方式都是采用反向代理
dev: {
//重點，設定反向代理
proxyTable: {
'/': {
target: 'http://localhost:8080',//vue訪問后臺服務的埠
changeOrigin: true,
pathRewrite: {
'^/': '/'
}
}
},
}
斜杠下可填充url，如'/api'，則后端介面處也要有'/api'
3.向外部獲取資源時，遇到的’Access-Control-Allow-Origin’跨域問題
（1）采用jsonp方式解決，就是和服務端約定一個回呼函式，把資料作為引數給到服務端，并獲取處理結果
（2）缺點只支持get請求
第一步執行npm命令
npm install --save vue-jsonp
第二步在main.js當中引入jsonp
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
第三步使用jsonp
如：
//通過百度地圖獲取經緯度資訊
getBaidu(){
let url = "http://api.map.baidu.com/geocoding/v3/?address="+encodeURIComponent(param)+
"&output=json&ak=填自己申請的";
this.$jsonp(url).then(res => {
console.log(res);
//你已成功解決
});
},
ok！！！
我這該死的滿頭秀發！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/49993.html
標籤：JavaScript