Vue解決跨域問題

一、Vue解決跨域問題

跨域問題是我們開發過程中常遇到的問題。前後端分離開發中，前端通過 ajax 請求數據時，往往會出現這種錯誤：Access to XMLHttpRequest at ‘http://example.com’ from origin ‘http://localhost:8080’ has been blocked by CORS policy.

CORS（Cross-Origin Resource Sharing，跨源資源共享）是 W3C 標準，它允許瀏覽器向跨源伺服器請求數據，實現前後端分離開發。由於瀏覽器的同源策略，導致直接發起跨域的請求時，瀏覽器會攔截這些請求。

Vue 是一個前端框架，作為前後端分離開發中的一部分，它的開發者對於解決跨域問題也提供了多種解決方案。

二、Vue解決跨域的方法

Vue 中，我們可以通過修改服務端後台代碼、安裝插件、配置代理、使用 jsonp 等方法來解決跨域問題。

三、Vue跨域解決方案

1. 通過修改服務端代碼解決跨域問題

我們可以在服務端後台代碼中添加如下 header：

response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Methods','POST, GET, OPTIONS, DELETE, PUT');
response.setHeader('Access-Control-Allow-Headers', 'Content-Type,token');
response.setHeader('Access-Control-Max-Age', '3600');

Access-Control-Allow-Origin 表示允許訪問的源，* 表示全部允許。Access-Control-Allow-Methods 表示允許的方法，Content-Type 表示發送請求的數據類型，Access-Control-Max-Age 表示緩存訪問過程中這些響應的最長時間，即在這段時間內不用再進行一次預檢請求。

2. 通過安裝插件解決跨域問題

Vue 中有很多插件可以解決跨域問題，例如：vue-resource、axios 等。可以在執行 ajax 的過程中設置 withCredentials:true，表示允許跨域請求攜帶 cookie。

// vue-resource
Vue.http.options.credentials = true;

// axios
axios.defaults.withCredentials = true;

3. 通過配置代理解決跨域問題

Vue 中可以在 config/index.js 中配置代理。通過配置代理，可以解決開發時出現跨域問題的情況。

module.exports = {
  dev: {
    proxyTable: {
      // 代理配置
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

這樣，只要請求地址是以 /api 開頭的，就會被代理到 http://example.com。

4. 使用 jsonp 解決跨域問題

Jsonp 是利用 javascript 的 script 標籤，從其他域中載入數據。通過 jsonp，我們可以在當前頁面創建一個 script 標籤，該標籤的請求地址指向其他域的地址。其他域返回內容時，需要在返回數據外包裹一層函數調用。

let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com';
document.body.appendChild(script);

function callback(data) {
  // 處理數據
}

四、Vue解決跨域的三種方法

1. Vue解決跨域CORS

CORS 是一種跨域解決方案，後端支持該方案後，前端使用 XMLHttpRequest 請求 API 時，瀏覽器會自動根據 CORS 協議進行請求，從而實現跨域。

2. Vue解決跨域的三種方法之代理

通過配置代理，把請求轉到本地伺服器上，再由本地伺服器進行跨域請求。

module.exports = {
  dev: {
    proxyTable: {
      // 代理配置
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

3. Vue解決跨域的三種方法之JSONP

使用 jsonp 可以不受跨域限制地獲取其他域的數據，使用起來非常簡單。

let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com?callback=callbackFunc';
document.body.appendChild(script);

function callbackFunc(data) {
  // 處理數據
}

五、Vue解決跨域請求

1. get 請求

this.$http.get('http://example.com', {
  params: {
    id: 123
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

2. post 請求

this.$http.post('http://example.com', {
  id: 123
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

3. jsonp 請求

this.$http.jsonp('http://example.com', {
  params: {
    callback: 'callbackFunc',
    id: 123
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

六、Vue解決跨域代理

Vue 中的代理是通過 devServer 對象來實現的，該對象可以配置一些伺服器的選項，例如代理、開啟 gzip 等選項。

devServer: {
  proxy: {
    '/api': {
      target: 'http://example.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

以上代碼表示：訪問 localhost:8080/api 將會被代理到 http://example.com。