快捷導(dǎo)航

在Vue中解決跨域問(wèn)題的常用方式

更新時(shí)間：2023年10月17日 09:52:34 作者：代碼真的養(yǎng)發(fā)

跨域問(wèn)題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪(fǎng)問(wèn),它只是一個(gè)前端框架,負(fù)責(zé)構(gòu)建用戶(hù)界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問(wèn)題的常用方式,需要的朋友可以參考下

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

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

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

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

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

1.JSONP（只適用于GET請(qǐng)求）

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

代碼如下（示例）：

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

2.CORS（Cross-Origin Resource Sharing）

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

代碼如下（示例）：

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

// 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ā)送跨域請(qǐng)求：
this.$http.get('http://api.example.com/data', {
  // 請(qǐng)求參數(shù)
}).then(response => {
  // 處理響應(yīng)數(shù)據(jù)
}).catch(error => {
  // 處理錯(cuò)誤
});

3.代理服務(wù)器

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

代碼如下（示例）：

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

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

三、總結(jié)

JSONP（JSON with Padding）：JSONP是一種利用<script>標(biāo)簽沒(méi)有跨域限制的特性來(lái)獲取數(shù)據(jù)的方法。在使用JSONP時(shí)，前端會(huì)動(dòng)態(tài)創(chuàng)建一個(gè)<script>標(biāo)簽，將請(qǐng)求發(fā)送到目標(biāo)服務(wù)器上，并指定一個(gè)回調(diào)函數(shù)作為參數(shù)。目標(biāo)服務(wù)器在返回?cái)?shù)據(jù)時(shí)，將數(shù)據(jù)包裝在回調(diào)函數(shù)中，以JavaScript代碼的形式返回給前端。由于<script>標(biāo)簽沒(méi)有同源策略限制，因此可以獲取到返回的數(shù)據(jù)。
CORS（Cross-Origin Resource Sharing）：CORS是一種通過(guò)服務(wù)器設(shè)置HTTP頭部信息來(lái)進(jìn)行跨域請(qǐng)求的機(jī)制。在服務(wù)端設(shè)置響應(yīng)頭中的Access-Control-Allow-Origin字段允許指定的源進(jìn)行跨域請(qǐng)求。當(dāng)瀏覽器發(fā)起跨域請(qǐng)求時(shí)，服務(wù)器響應(yīng)中包含了合適的CORS頭部信息，瀏覽器會(huì)根據(jù)這些頭部信息來(lái)判斷是否允許跨域請(qǐng)求。
代理服務(wù)器：代理服務(wù)器是在開(kāi)發(fā)環(huán)境中配置的一個(gè)中間層服務(wù)器，用于轉(zhuǎn)發(fā)請(qǐng)求，解決跨域問(wèn)題。在Vue項(xiàng)目中，通過(guò)配置代理服務(wù)器將前端的請(qǐng)求發(fā)送到代理服務(wù)器上，代理服務(wù)器再將請(qǐng)求轉(zhuǎn)發(fā)到后端接口。由于代理服務(wù)器與后端接口是同源的，所以不存在跨域問(wèn)題。

區(qū)別：

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

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

您可能感興趣的文章: