聊聊Vue Router跨域報錯誤的原因和解決方法

Vue Router 跨域回報錯誤是一個很普遍的問題。使用 Vue Router 路由時，如果跨網域存取另一個網站或 API，會出現跨網域封包錯誤。本文將介紹 Vue Router 跨域回報錯誤的原因與解決方法。

一、跨網域的原因

在瀏覽器中，同源策略是一種安全機制，限制了一個網站下的 JavaScript 只能存取該網站下的資源。同源策略不允許透過腳本跨網域存取其他網域的數據，例如在一個網域下的頁面中使用 Ajax 呼叫另一個網域下的 API 介面。這是因為這樣做會帶來安全問題，攻擊者可以透過跨網域腳本竊取使用者的敏感資訊。

二、vue-router 的跨域報錯

Vue Router 路由是基於瀏覽器的，因此也受到同源策略的限制。當我們在 Vue 元件中使用 Vue Router 存取另一個網站或 API 介面時，會出現跨域報錯。其報錯資訊一般為：

Access to XMLHttpRequest at 'http://xxxxxx' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin ' header is present on the requested resource.

這個跨域報錯提示了一個CORS 的錯誤，因為瀏覽器限制了向其他網域的請求，其他網站不允許跨網域請求您的網站的資源。如果您使用的是本機伺服器，則可能會遇到這個問題，因為您的伺服器可能沒有設定 CORS，而 Vue Router 跨網域請求需要 CORS。

三、解決跨域報錯方法

1. 使用後端代理

後端代理可以繞過跨域限制。透過向另一個網站發送請求和接收回應的方式，伺服器完成請求和回應，並分別對請求的資源和回應的資料進行處理。在前端程式碼中，我們只需將請求傳送到後端代理程式的 URL，然後在後端代理中將請求傳送到目標 URL，並將接收到的回應傳回給前端。以下是一個範例程式碼：

// 前端代码
fetch('/api').then(res => {
  console.log(res)
})

// 服务器代理代码
app.get('/api', (req, res) => {
  axios.get('http://othersite.com/api').then(response => {
    res.json(response.data)
  }).catch(error => {
    console.log(error)
  })
})

2. 設定 CORS

如果想透過瀏覽器直接存取跨網域 API 或資源，可以透過自行設定伺服器的 CORS。在伺服器上設定 Access-Control-Allow-Origin 頭部以允許跨網域請求。以下是一些常見的CORS 設定範例：

• Node.js（Express）：

  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type")
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
  next()

• Apache：

  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>

• Nginx：

  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

四、總結

Vue Router 跨域報錯是一個很常見的問題，在使用Vue.js 框架開發時，深入理解該問題，協助解決跨域問題，利用後端代理和CORS 配置避免CORS 報錯，既可以提升開發效率，又可以有效提高程式碼品質。以上就是 Vue Router 跨域回報錯誤的原因和兩種方法的解決方法。

以上是聊聊Vue Router跨域報錯誤的原因和解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！