vue20跨域代理程式怎麼解決

隨著 Web 開發的不斷發展和進步，越來越多的前端技術和框架被廣泛應用。 Vue.js 作為一個現代化的 JavaScript 框架，已經成為了前端開發的熱門選擇。在 Vue.js 應用程式的開發過程中，跨域是一個經常會遇到的問題。本文將介紹 Vue.js 2.0 中的跨域問題及其解決方法。

一、什麼是跨域

在Web 應用程式開發中，當一個頁面從一個網域的網站請求存取另一個網域的資源時，由於瀏覽器的同源策略限制，資源無法被正確的取得。這就是所謂的跨域。

具體來說，同源策略是瀏覽器最核心、最基礎的安全功能。同源策略要求，兩個網址只有在協定、網域名稱和連接埠都相同的情況下，才允許相互訪問，否則就產生跨域問題。

通俗的說，假設一個網站叫做A 網站，另一個網站叫做B 網站，當A 網站透過瀏覽器請求B 網站的資料時，由於B 網站不在A 網站所在的網域中，所以預設情況下瀏覽器會拒絕這種存取請求。

二、Vue.js 2.0 中的跨域問題

由於Vue.js 2.0 是一個單頁應用程序，其預設的開發和生產環境都是使用本地的Node.js伺服器進行開發和測試。在這種情況下，我們往往會遇到跨域問題。

例如，我們使用axios 來傳送Ajax 請求，向後端伺服器請求JSON 數據，程式碼如下：

import axios from 'axios'

axios.get('http://localhost:8080/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在上面的程式碼中，我們嘗試向位址為http: //localhost:8080/api/data 的伺服器發送GET 請求，但是由於預設瀏覽器是不允許這種跨網域存取的，所以在運行的時候就會出現錯誤。

三、如何解決跨域問題

為了解決跨域問題，我們需要指定一個代理伺服器，在本地啟動該伺服器，然後把所有的跨域請求都轉送到該伺服器上。因為代理伺服器和後端伺服器都在同一個網域中，所以就不存在跨域問題了。

在 Vue.js 2.0 中，我們可以使用 webpack-dev-server 中的 proxyTable 設定項目來指定代理伺服器。 proxyTable 是一個對象，其中的每個屬性都是代理規則，形如：

proxyTable: {
  '/api': 'http://localhost:9000'
}

上面的程式碼中，我們將以/api 開頭的所有請求都轉發到位址為http://localhost:9000 的伺服器上。

四、範例程式碼

下面是一個關於如何使用proxyTable 設定代理伺服器的範例程式碼：

// 代码文件：vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9000', // 代理目标地址
        pathRewrite: { '/api': '' }, // 请求路径重写
        changeOrigin: true, // 允许跨域
      },
    },
  },
}

在上述程式碼中，我們首先需要在Vue.js 2.0專案根目錄下新增一個vue.config.js 文件，用來設定開發環境下的伺服器。在 devServer 中，我們新增了一個 proxy 屬性，該屬性是一個對象，裡麵包含了我們的代理規則。我們可以根據後台 API 的實際情況來設定代理目標位址，例如 http://localhost:9000。

我們也可以設定 pathRewrite 屬性，指定請求路徑的重寫規則。例如，當我們的請求路徑為/api/data 時，我們可以使用{ '/api': '' } 把/api 前綴去掉，請求路徑變成了/data。

在最後，我們還需要設定 changeOrigin 屬性為 true，來允許跨域存取。然後我們就可以愉快地使用 axios 發送跨域請求了：

import axios from 'axios'

axios.get('/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

五、總結

#本文介紹了 Vue.js 2.0 中的跨域問題及其解決方法。由於同源策略的限制，我們無法直接從前端應用程式存取其他網域下的資源，但是我們可以使用代理伺服器來繞過這個問題。在 Vue.js 2.0 中，我們可以使用 webpack-dev-server 的 proxyTable 設定項目來指定代理伺服器，解決跨網域問題。

以上是vue20跨域代理程式怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！