創新實訓——008

上一篇介紹了Vue.js（以下簡稱vue）的前端請求，簡要說明了axios和websocket的基本使用，但是當你剛開始使用時，你會發現會報跨域錯誤。

跨域

跨域是瀏覽器的一種安全機制，基於同源策略，是指當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不同即爲跨域，這就可以很好避免因執行外部惡意腳本而造成損害，但是畢竟前後端要分離的話，後臺和前端是兩個進程要使用不同端口，所以就會造成跨域問題，我在這裏提供兩種在項目編寫過程中可以解決跨域問題的辦法。

基於後端的解決辦法

像我自己基於flask編寫的後端接口，跨域問題就可以在後端解決，只需引入CORSfrom flask_cors import CORS並在編寫的接口前添加CORS(app, resources=r'/*')就可以了，類似的spring boot只要在編寫的接口前加入@CrossOrigin(origins = "*")就可以了，websocket進行如下定義：

socketIO=SocketIO(app,cors_allowed_origins="*",async_mode=None)

下面關於CORS的介紹引自阮一峯，鏈接：阮一峯CORS

CORS是一個W3C標準，全稱是“跨域資源共享”（Cross-origin resource sharing）。
CORS需要瀏覽器和服務器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低於IE10。

整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對於開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。

因此，實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。

上面也正好可以解釋爲什麼跨域是瀏覽器做出的限制，而要在服務器端做操作，因爲它們倆在標準下相互配合。

基於前端的解決辦法

因爲有些時候我們會調用第三方接口，所以此時就沒法在後端進行處理，需要考慮基於前端的解決辦法。
nginx的反向代理可以解決，我現在使用的是vue，所以要用vue自己的解決方案。
例如我在本系統中需要使用百度的定位IP位置的API，需要：

1、設置代理
在config/index.js文件下設置proxyTable如下：
proxyTable: {
      '/api': {
        target:'http://api.map.baidu.com/location/ip', // 你請求的第三方接口
        changeOrigin:true, // 在本地會創建一個虛擬服務端，然後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
        pathRewrite:{  // 路徑重寫，
          '^/api': ''  // 替換target中的請求地址，也就是說以後你在請求http://api.map.baidu.com/location/ip這個地址的時候直接寫成/api即可。
        }
      }
}
2、更改axios的請求方式
用api就可以替換http://api.map.baidu.com/location/ip這個地址的
_this.axios.get('api?ak='+_this.ak+'&ip='+newVal)
      .then(function(res){
      //console.log(res.data['status'])
      if(res.data['status']==1){
           _this1.rightMes="本地"
       }else{
           _this1.rightMes=res.data['content']['address_detail']['province']
       }
})

按照上面的解決方法已經可以滿足我的使用。