如何處理vue上線跨域問題

這篇“如何處理vue上線跨域問題”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何處理vue上線跨域問題”文章吧。

什么是跨域

跨域是指在訪問一個服務器上的資源時，使用的是跨域請求的方式。跨域請求有很多種，其中常見的有跨域訪問資源、跨域寫cookie、跨域調用接口等。在瀏覽器安全策略之下，跨域請求是默認禁止的，因為跨域請求可能帶來安全風險。

解決Vue上線跨域問題

1.代理服務器

代理服務器是通過在前端請求后臺接口時，將請求轉發到接口所在的服務器上，在前端代碼中使用代理服務器的地址作為請求路徑，保證請求正常進行。利用代理服務器，前端能夠實現對接口的請求轉發，可以對后端接口的返回內容進行代理，修改返回內容，同時能夠在請求前、請求后加一些修改性參數或處理邏輯。代理服務器大都是后端人員編寫，前端項目調用即可。

代理服務器有很多種，例如Nginx、阿里云API網關、Apache等等。在Vue項目上線時，使用代理服務器將所有接口的訪問路徑指向同一個域名，例如將所有接口請求路徑重定向到“/api”，使用“/api”作為請求路徑。然后在代理服務器上定義一個轉發規則，將以“/api”開頭的請求轉發到后端接口所在的服務器上就可以解決跨域問題。

在Vue項目中配置代理服務器：

//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/'
        }
      },
    }
  }
}

2.jsonp

JSONP是JavaScript和跨域請求的一種解決方案。客戶端通過動態創建<script>標簽，添加需要請求的URL（接口地址）以及回調函數作為參數，發送請求到服務器。服務器端接受請求后，返回一個JavaScript腳本，callback函數并攜帶需要的數據。最后客戶端在回調函數中對返回的數據進行處理。JSONP是一種比較靈活的跨域解決方式，但是它只能支持GET請求，并且只能請求純文本格式的數據。

在Vue項目中使用JSONP：

this.$jsonp('http://api.jisuapi.com/weather/query', { //jsonp函數可以使用axios+jsonp的方式實現
    city: '上海',
    appkey: 'your appkey'
  }, (data) => {
    console.log(data)
  })

3.CORS

CORS（跨域資源共享）是跨域請求的一種官方解決方案，它可以讓Web應用服務器進行跨域訪問控制，從而使瀏覽器安全地完成跨域請求。使用CORS，只需要在后臺的響應頭信息中增加Access-Control-Allow-Origin字段，并設置為'*'或指定的域名即可，然后瀏覽器會根據響應頭信息進行處理，從而達到解決跨域請求的問題。

在后臺增加響應頭信息：

//以Java Web服務為例，增加響應頭信息
response.setHeader("Access-Control-Allow-Origin", "*");//允許跨域

4. WebSocket

WebSocket是一種全雙工通信協議，在跨域請求中起到了很好的解決作用。WebSocket通過HTTP協議進行握手，創建連接后，數據可以在客戶端和服務器之間進行雙向傳輸。

在Vue項目中使用WebSocket：

var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
  ws.send('發送消息到服務器');
};
ws.onmessage = function(event) {
  console.log('從服務器接受到 ', event.data);
}

以上就是關于“如何處理vue上線跨域問題”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。