vue解決跨域問題

當下流行的前後端分離項目，常遇跨域問題，現從兩點，解決跨域問題

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！！！

我這該死的滿頭秀髮！！！