vue 跨域  springCloud @CrossOrigin注解

一丶什么是跨域

跨域問題來源於瀏覽器的同源策略，瀏覽器為了提高網站的安全性，在發送ajax請求時，只有在當前頁面地址與請求地址的協議+域名+端口號相同時才允許訪問，否則會被攔截。

協議即通信協議，比如我們現在常見的http和https，如果當前頁面地址使用http協議，請求的地址使用https協議，那么這個請求就存在跨域問題。

域名即網站網址，如baidu.com，360.com存在跨域

端口號即域名對應的服務器的監聽端口，這個我們一般是看不到的，因為一般服務器都使用80端口，瀏覽器默認為80端口，所以不需要在域名后再寫出端口號。當8080端口發出的請求為80端口時，也存在跨域

當我們請求一個接口的時候，出現如：Access-Control-Allow-Origin 字眼的時候說明請求跨域了

在前后端分離后，請求數據時跨域問題出現的越來越多，如何解決呢？

二丶如何解決跨域問題

1.使用jsonp實現，網頁通過script標簽向服務器請求json數據，服務器受到請求后，將數據放在一個指定名字的回調函數的參數里面傳給前端。

<script src="http://www.test.com/getData?callback=getData"></script>
// 向服務器test.com發出請求，該請求的查詢字符串有一個callback參數，用來指定回調函數的名字

// 處理服務器返回回調函數的數據
<script type="text/javascript">
    // 服務器返回的數據會放到回調函數里面
    function getData(res){
        // 處理獲得的數據
        console.log(res.data)
    }
</script>

2.使用Jquery ajax實現，

$.ajax({
  url: 'http://www.test.com:8888/getData',
  type: 'get',
  dataType: 'jsonp',  // 請求方式為jsonp
  jsonpCallback: "handleCallback",    // 自定義回調函數名
  data: {}
})

　　3.在vue開發中實現跨域：

proxy中設置跨域vue -->config--> index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../manage/index.html'),
    assetsRoot: path.resolve(__dirname, '../manage/'),
    assetsSubDirectory: 'static',

    assetsPublicPath: './',
    productionSourceMap: true,

    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },
  dev: {
    env: require('./dev.env'),
    port: 8088,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        // target: 'http://10.9.65.114:8005',
        
        // target: 'http://10.9.240.3:8020',
        // DAT
        target: 'http://10.9.240.9:8020',
        // Localhost
        // target: 'http://10.9.240.14:8020',
        pathRewrite: {
          '^/api': '/'
        }
      }
    },

    cssSourceMap: false
  }
}

　　在vue中使用proxy進行跨域的原理是：將域名發送給本地的服務器（啟動vue項目的服務,loclahost:8080），再由本地的服務器去請求真正的服務器。

以下是我在開發vue項目中實現跨域的步驟：

　　1.在proxy中設置要訪問的地址，並重寫/api為空的字符串，因為我們真正請求的地址是沒有帶/api，這個重寫很重要!!!

　　2.在創建axios實例的時候將baseURL設置為/api ,這時候我們的跨域就已經完成了。

　　3. 假如請求的真正地址為：http://121.121.67.254:8185/core/getdata/userInfo,但我們在瀏覽器上會看到是這樣的： http://localhost:8080/api/core/getData/userInfo ,多了個/api，但並不影響我們請求數據。

三丶自己項目用處

三丶參考:vue中config/index.js:配置的詳細理解

https://www.cnblogs.com/yangguoe/p/9293892.html

https://www.cnblogs.com/lihaohua/p/12372267.html