vue使用反向代理解決跨域問題方案

更新時(shí)間：2023年01月10日 16:59:21 作者：xiaoxiaok

這篇文章主要為大家介紹了vue使用反向代理解決跨域問題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

為什么要解決跨域問題

因?yàn)闉g覽器有限制，只有同域名同端口號(hào)下的數(shù)據(jù)才能拿來用；

那如果想拿到不同域名不同端口號(hào)下的數(shù)據(jù)就不行了；

在單文件組件中如何去解決跨域問題

因?yàn)榉?wù)器沒有跨域限制，只有瀏覽器有跨域限制，所以我們可以通過我們自己的服務(wù)器去拿回后端服務(wù)器接口的數(shù)據(jù)，再傳給前端；我們自己的服務(wù)器是：啟動(dòng)單文件組件項(xiàng)目會(huì)啟動(dòng)一臺(tái)8080端口號(hào)的服務(wù)器；

解決跨域問題需要配置反向代理代碼；如何配置反向代理代碼：

用axios向后端數(shù)據(jù)接口發(fā)起請(qǐng)求，拿回?cái)?shù)據(jù)：

在App.vue中引入axios模塊，沒下載的先下載：下載：

npm i --save axios 引入 axios模塊：

import axios from 'axios' 發(fā)axios請(qǐng)求：

后端數(shù)據(jù)接口：貓眼驗(yàn)證中心

mounted () {
    axios.get('/api/mmdb/movie/v3/list/hot.json?ct=%E6%89%AC%E5%B7%9E&ci=120&channelId=4')
    .then(res => {
      console.log(res.data.hot)
    })

配置反向代理

在項(xiàng)目文件夾下新建一個(gè) vue.config.js 的文件，然后寫上下面這段代碼(可參照下面的配置模板文件)：

module.exports = {
  //配置反向代理
    port: 8080,
    host: 'localhost', // ip 本地
    open: true,
    proxy: {
      "/api": {
        target: `http://10.43.8.102:55555/`,
        changeOrigin: true,
        ws: true, // 是否代理websockets
        pathRewrite: {
          "/api": ""
        }
      }
    }
}

注意：寫好配置代碼以后，要重新運(yùn)行項(xiàng)目，重啟服務(wù)器；

配置模板文件及字段解釋

module.exports = {
    devServer: {
        port: 8080, // 設(shè)置端口號(hào)
        host: 'localhost', // ip 本地
        disableHostCheck: true, //是否關(guān)閉用于 DNS 重綁定的 HTTP 請(qǐng)求的 HOST 檢查
        hotOnly: false, // 熱更新
        https: false, // https:{type:Boolean}配置前綴
        open: false, //配置自動(dòng)啟動(dòng)瀏覽器
        proxy: null,  //設(shè)置代理
        proxy: { //目的是解決跨域，若測(cè)試環(huán)境不需要跨域，則不需要進(jìn)行該配置
            '/api': { // 攔截以 /api 開頭的url接口
                target: 'http://localhost:5140/api', //目標(biāo)接口域名
                changeOrigin: true, //是否跨域
                ws: true, //如果要代理 websockets，配置這個(gè)參數(shù)
                secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
                // 標(biāo)識(shí)替換
                // 原請(qǐng)求地址為 /api/getData 將'/api'替換''時(shí)，
                // 代理后的請(qǐng)求地址為： http://xxx.xxx.xxx/getData
                // 若替換為'/other',則代理后的請(qǐng)求地址為 http://xxx.xxx.xxx/other/getData 
                pathRewrite: { // 標(biāo)識(shí)替換
                    '^/api': ''   //重寫接口 后臺(tái)接口指向不統(tǒng)一  所以指向所有/
                }
            }
        }
    },
}

整個(gè)配置反向代理的思路

我們要配置反向代理的原因是：因?yàn)榭缬騿栴}我們直接拿不到跟我們不同域名不同端口號(hào)下的數(shù)據(jù)，這是瀏覽器的跨域限制，我們不能在瀏覽器上顯示后端的數(shù)據(jù)，但是服務(wù)器端沒有跨域限制，所以可以讓我們自己的服務(wù)器（項(xiàng)目運(yùn)行，會(huì)啟動(dòng)一臺(tái)服務(wù)器），去請(qǐng)求后端服務(wù)器，拿到數(shù)據(jù)，然后再傳給我們前端。如何拿呢：按照上面的代碼進(jìn)行配置，axios.get后面的請(qǐng)求地址，原本是：第一張圖這樣子，

但是我們把前面域名給去掉，往下面這個(gè)接口發(fā)請(qǐng)求：

反向代理服務(wù)器的應(yīng)用：往這個(gè)接口發(fā)請(qǐng)求，被攔截到了，凡是往這個(gè)接口發(fā)請(qǐng)求的，反向代理服務(wù)器，會(huì)在前面加上target域名，往真實(shí)的地址去請(qǐng)求。

配置信息：

只要是前端往‘/api’這個(gè)接口發(fā)請(qǐng)求的，前面都加上target里的這個(gè)域名，此時(shí)我們自己的服務(wù)器就知道最后是往這個(gè)地址請(qǐng)求數(shù)據(jù)：

解決接口重復(fù)問題

有時(shí)候會(huì)發(fā)現(xiàn)同一個(gè)接口的域名可能不一樣，我們只需要拿指定域名的數(shù)據(jù)，比如說“/api”這個(gè)接口名字一樣，但是這個(gè)接口前面的域名不一樣，也就是兩個(gè)不一樣的地址，剛好就“api”這個(gè)名字重復(fù)了，如果還像上面那樣配置的話，它就把所有“api”接口的地址前面全加上了一個(gè)域名。

解決辦法：我們可以在加一個(gè)自定義接口，格式：“/名稱”，例如：前面加個(gè)“/yiyi”：

然后在配置文件中加一個(gè)屬性：pathRewrite

devServer: {
    proxy: {
      '/yiyi': {
        target: 'https://i.maoyan.com',
        changeOrigin: true,
        //路徑重寫
        pathRewrite: {
          '^/yiyi': ''
        }
      }
    }
  }

把“/api”改成“/yiyi”，然后加上一個(gè)pathRewrite屬性，含義是路徑重寫，把自定義這個(gè)接口換成空，意思就是先按照“yiyi”這個(gè)名稱去選出App.vue里“/yiyi”的接口，選出來后再把加的yiyi接口賦值為空，這樣就可以避免和其他“api”接口的路徑數(shù)據(jù)搞混了，最終拿到的數(shù)據(jù)接口還是：