在前端開發(fā)中，我們經(jīng)常遇到跨域存取的問題。 Vue作為一種使用廣泛的前端框架，也常常遇到這個(gè)問題。在本文中，我們將介紹Vue中的跨域存取問題及其解決方案。

什麼是跨域存??？

簡單地說，跨網(wǎng)域存取是指在一個(gè)網(wǎng)域下的Web頁面去存取另一個(gè)網(wǎng)域下的資源。例如，如果你在http://www.example.com網(wǎng)域下的頁面中要求http://www.example2.com網(wǎng)域下的資源，就會(huì)產(chǎn)生跨網(wǎng)域存取。

Vue中的跨網(wǎng)域存取問題

當(dāng)我們使用Vue發(fā)送Ajax請求時(shí)，如果請求的URL與目前頁面的網(wǎng)域名稱不同，就會(huì)發(fā)生跨網(wǎng)域存取問題。在這種情況下，瀏覽器會(huì)向伺服器發(fā)送OPTIONS請求，詢問伺服器是否支援跨網(wǎng)域存取。如果伺服器回傳了允許跨網(wǎng)域存取的回應(yīng)頭，才能正常完成Ajax請求。

解決方案

Vue中有幾種方式可以解決跨域存取的問題。

1.使用代理程式

Vue-cli提供了一種透過設(shè)定代理來解決跨網(wǎng)域存取的方式。我們可以透過在config目錄下的index.js檔案中配置代理來實(shí)現(xiàn)跨域存取。

具體步驟如下：

在index.js檔案中的dev物件中加入proxyTable屬性。

proxyTable: {
  // 將所有以/api開頭的請求代理到http://localhost:3000上
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

此時(shí)，當(dāng)我們要求以/api開頭的URL時(shí)，就會(huì)被代理到http://localhost:3000上。 changeOrigin屬性設(shè)定為true表示跨域請求時(shí)需要修改請求頭中的origin字段，pathRewrite屬性表示將請求路徑中的/api替換為空字串。

2.JSONP（僅適用於GET請求）

JSONP是一種透過在頁面上動(dòng)態(tài)新增script標(biāo)籤來實(shí)現(xiàn)跨網(wǎng)域請求的方式。我們可以透過在Vue中使用JSONP來解決跨域存取問題。

具體步驟如下：

安裝jsonp庫

npm install jsonp --save

在頁面中使用JSONP

import jsonp from 'jsonp'

jsonp(url, options, (err, data) => {
  if (!err) {
    // 處理數(shù)據(jù)
  }
})

url表示請求的URL，options表示請求的參數(shù)，回呼函數(shù)(err, data)中的data即為傳回的資料。

3.CORS

CORS是一種由W3C制定的標(biāo)準(zhǔn)，可讓伺服器決定是否允許跨網(wǎng)域存取。我們可以在伺服器端做一些配置，讓伺服器支援CORS。配置方式因伺服器而異，這裡不再贅述。

使用CORS方式時(shí)，我們需要在Vue中使用withCredentials屬性來實(shí)現(xiàn)跨域存取。具體步驟如下：

在Vue中啟用withCredentials屬性

Vue.http.options.credentials = true

#withCredentials屬性表示是否允許跨網(wǎng)域請求在傳送cookie等使用者憑證資訊。

結(jié)論

在Vue中解決跨域存取問題的方式有很多種，但每種方式都有其優(yōu)缺點(diǎn)。使用代理方式可以很好地解決Vue中的跨域存取問題，JSONP僅適用於GET請求，使用CORS方式時(shí)需要在伺服器端進(jìn)行一些設(shè)定。我們應(yīng)該根據(jù)自己的實(shí)際情況選擇合適的解決方案。

以上是Vue中的跨域存取問題解決方案的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！