隨著 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中文網其他相關文章！
