vue的跨域配置

當我們從一個域名訪問另一個域名的時候，就會發送跨域請求，例如，前後端分離的項目開發時，前端ip+port爲 localhost:8080，後端爲localhost:8081，這個時候就需要跨域。

跨域會產生一個安全問題，例如，我先訪問了銀行的網頁，cookie中存有銀行訪問的信息，cookie信息會被放入到請求頭裏面以便下次能夠自動識別出你是已登錄用戶，然後我又去瀏覽了其它含有病毒的網站，我們叫它evil網站，那麼evil網站可能就會拿着我們的cookie信息去訪問銀行網頁，甚至轉走我們的錢，爲了防止這種情況，瀏覽器有一個同源策略，大概意思就是隻有最初訪問的那一個源頭（ip+port）可以訪問它，其它的請求都不允許訪問，這樣就解決了該安全問題。但是這對於正人君子想要進行正當的跨域請求就造成了阻礙，所以我們給正人君子配了一把鑰匙，就是本文要說的跨域配置：

一、在vue項目的config/index.js中找到 proxyTable 來添加跨域支持：

//添加跨域支持
    proxyTable: {
      '/api':{
        target : 'http://localhost:8123',  //目標接口域名
        changeOrigin : true,    //是否跨域
        pathRewrite : {
          '^api' : '/'     //重寫接口
        }
      }
    }

如果我的請求是 http://localhost:8080/api/abc 將被替換爲 http://localhost:8123/abc ,api及之前的部分都被替換爲 target 了。

二、注意一下是否在main.js中配置了反向代理的默認訪問路徑，如：

// 設置反向代理，前端請求默認發送到 http://localhost:8443/api
axios.defaults.baseURL = 'http://localhost:8123/api'

如果是這樣的話，proxyTable 中的 路徑就要考慮這個 baseURL。注意，這裏是 defaults ,而不是 default 。

三、在Rest接口中配置 SpringMVC 的 @CrossOrigin 註解

@CrossOrigin 它表示當前接口支持CORS規範，CORS叫做 跨源資源共享，是由大多數瀏覽器實現的W3C規範，如 @CrossOrigin(origins = "http://domain2.com", maxAge = 3600)：

//origins表示允許的域名列表，maxAge 表示支持持續響應的時間
@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
    @PostMapping(value = "/api/login")
    public Result login(@RequestBody User requestUser) {