一、為什么會發(fā)生跨域？

當(dāng)在Vue應(yīng)用中通過axios等工具發(fā)送HTTP請求時，如果請求的目標(biāo)URL與當(dāng)前頁面的域名、協(xié)議、端口號不一致，就會觸發(fā)瀏覽器的同源策略限制，導(dǎo)致跨域問題。

跨域問題是由瀏覽器引起的安全限制，而不是Vue框架本身導(dǎo)致的。Vue本身并不限制跨域訪問，它只是一個前端框架，負(fù)責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯。

解決跨域問題的方法包括代理服務(wù)器、JSONP和CORS

二、解決跨域的方法有什么？

1.JSONP（只適用于GET請求）

• 原理：利用script標(biāo)簽的src屬性可以跨域加載資源的特性，通過動態(tài)創(chuàng)建script標(biāo)簽，并指定一個回調(diào)函數(shù)作為參數(shù)發(fā)送請求，在服務(wù)端返回數(shù)據(jù)時會將數(shù)據(jù)作為回調(diào)函數(shù)的參數(shù)傳入，從而實現(xiàn)跨域獲取數(shù)據(jù)。

代碼如下（示例）：

// 在需要發(fā)送跨域請求的組件中引入jsonp庫（如axios-jsonp）
import jsonp from 'axios-jsonp';
// 發(fā)送請求
this.$jsonp('http://api.example.com/data', {
  params: {
    // 請求參數(shù)
  },
  // 回調(diào)函數(shù)名，默認(rèn)為'callback'
  callbackParamName: 'callback',
}).then(response => {
  // 處理響應(yīng)數(shù)據(jù)
}).catch(error => {
  // 處理錯誤
});

2.CORS（Cross-Origin Resource Sharing）

• 原理：瀏覽器在發(fā)送跨域請求時會自動在請求頭中添加Origin字段，如果服務(wù)端允許該請求的源（Origin）訪問，服務(wù)端就會在響應(yīng)頭中添加Access-Control-Allow-Origin字段，瀏覽器收到響應(yīng)后會檢查該字段，如果允許，則將響應(yīng)返回給前端。

代碼如下（示例）：

在服務(wù)端設(shè)置響應(yīng)頭：在服務(wù)端設(shè)置響應(yīng)頭然后在Vue中發(fā)送跨域請求：

// Express框架示例，設(shè)置服務(wù)器響應(yīng)頭
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});
發(fā)送跨域請求：
this.$http.get('http://api.example.com/data', {
  // 請求參數(shù)
}).then(response => {
  // 處理響應(yīng)數(shù)據(jù)
}).catch(error => {
  // 處理錯誤
});

3.代理服務(wù)器 

• 原理：在Vue的配置文件中指定一個代理服務(wù)器，將前端的請求轉(zhuǎn)發(fā)到該代理服務(wù)器，然后由代理服務(wù)器向目標(biāo)服務(wù)器發(fā)送請求并獲取響應(yīng)數(shù)據(jù)，最后再將響應(yīng)返回給前端。這樣可以繞過瀏覽器的同源策略限制。

代碼如下（示例）：

在Vue的配置文件（vue.config.js）中添加代理配置再在vue中發(fā)送請求

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

三、總結(jié)

1. JSONP（JSON with Padding）：JSONP是一種利用<script>標(biāo)簽沒有跨域限制的特性來獲取數(shù)據(jù)的方法。在使用JSONP時，前端會動態(tài)創(chuàng)建一個<script>標(biāo)簽，將請求發(fā)送到目標(biāo)服務(wù)器上，并指定一個回調(diào)函數(shù)作為參數(shù)。目標(biāo)服務(wù)器在返回數(shù)據(jù)時，將數(shù)據(jù)包裝在回調(diào)函數(shù)中，以JavaScript代碼的形式返回給前端。由于<script>標(biāo)簽沒有同源策略限制，因此可以獲取到返回的數(shù)據(jù)。

2. CORS（Cross-Origin Resource Sharing）：CORS是一種通過服務(wù)器設(shè)置HTTP頭部信息來進(jìn)行跨域請求的機(jī)制。在服務(wù)端設(shè)置響應(yīng)頭中的Access-Control-Allow-Origin字段允許指定的源進(jìn)行跨域請求。當(dāng)瀏覽器發(fā)起跨域請求時，服務(wù)器響應(yīng)中包含了合適的CORS頭部信息，瀏覽器會根據(jù)這些頭部信息來判斷是否允許跨域請求。

3. 代理服務(wù)器：代理服務(wù)器是在開發(fā)環(huán)境中配置的一個中間層服務(wù)器，用于轉(zhuǎn)發(fā)請求，解決跨域問題。在Vue項目中，通過配置代理服務(wù)器將前端的請求發(fā)送到代理服務(wù)器上，代理服務(wù)器再將請求轉(zhuǎn)發(fā)到后端接口。由于代理服務(wù)器與后端接口是同源的，所以不存在跨域問題。

區(qū)別：

• JSONP只適用于GET請求，而CORS和代理服務(wù)器方式可以支持各種類型的HTTP請求。
• JSONP需要目標(biāo)服務(wù)器支持返回包裝在回調(diào)函數(shù)中的數(shù)據(jù)，而CORS和代理服務(wù)器方式不需要對目標(biāo)服務(wù)器做特殊要求。
• CORS方式需要后端對響應(yīng)頭進(jìn)行設(shè)置，而代理服務(wù)器方式則需要開發(fā)者在開發(fā)環(huán)境中進(jìn)行配置。
• 代理服務(wù)器方式可以將前端和后端的接口統(tǒng)一在同一個域名下，簡化了前端代碼的處理。

以上就是在Vue中解決跨域問題的常用方式的詳細(xì)內(nèi)容，更多關(guān)于Vue解決跨域問題的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論