如何處理vue上線跨域問題

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

什么是跨域

跨域是指在訪問一個服務(wù)器上的資源時，使用的是跨域請求的方式?？缬蛘埱笥泻芏喾N，其中常見的有跨域訪問資源、跨域?qū)慶ookie、跨域調(diào)用接口等。在瀏覽器安全策略之下，跨域請求是默認(rèn)禁止的，因為跨域請求可能帶來安全風(fēng)險。

解決Vue上線跨域問題

1.代理服務(wù)器

代理服務(wù)器是通過在前端請求后臺接口時，將請求轉(zhuǎn)發(fā)到接口所在的服務(wù)器上，在前端代碼中使用代理服務(wù)器的地址作為請求路徑，保證請求正常進(jìn)行。利用代理服務(wù)器，前端能夠?qū)崿F(xiàn)對接口的請求轉(zhuǎn)發(fā)，可以對后端接口的返回內(nèi)容進(jìn)行代理，修改返回內(nèi)容，同時能夠在請求前、請求后加一些修改性參數(shù)或處理邏輯。代理服務(wù)器大都是后端人員編寫，前端項目調(diào)用即可。

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

在Vue項目中配置代理服務(wù)器：

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

2.jsonp

JSONP是JavaScript和跨域請求的一種解決方案?？蛻舳送ㄟ^動態(tài)創(chuàng)建<script>標(biāo)簽，添加需要請求的URL（接口地址）以及回調(diào)函數(shù)作為參數(shù)，發(fā)送請求到服務(wù)器。服務(wù)器端接受請求后，返回一個JavaScript腳本，callback函數(shù)并攜帶需要的數(shù)據(jù)。最后客戶端在回調(diào)函數(shù)中對返回的數(shù)據(jù)進(jìn)行處理。JSONP是一種比較靈活的跨域解決方式，但是它只能支持GET請求，并且只能請求純文本格式的數(shù)據(jù)。

在Vue項目中使用JSONP：

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

3.CORS

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

在后臺增加響應(yīng)頭信息：

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

4. WebSocket

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

在Vue項目中使用WebSocket：

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

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