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

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

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

為什么要解決跨域問題

因為瀏覽器有限制，只有同域名同端口號下的數(shù)據(jù)才能拿來用；

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

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

因為服務(wù)器沒有跨域限制，只有瀏覽器有跨域限制，所以我們可以通過我們自己的服務(wù)器去拿回后端服務(wù)器接口的數(shù)據(jù)，再傳給前端；我們自己的服務(wù)器是：啟動單文件組件項目會啟動一臺8080端口號的服務(wù)器；

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

用axios向后端數(shù)據(jù)接口發(fā)起請求，拿回數(shù)據(jù)：

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

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

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

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

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)
    })

配置反向代理

在項目文件夾下新建一個 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": ""
        }
      }
    }
}

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

配置模板文件及字段解釋

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

整個配置反向代理的思路

我們要配置反向代理的原因是：因為跨域問題我們直接拿不到跟我們不同域名不同端口號下的數(shù)據(jù)，這是瀏覽器的跨域限制，我們不能在瀏覽器上顯示后端的數(shù)據(jù)，但是服務(wù)器端沒有跨域限制，所以可以讓我們自己的服務(wù)器（項目運行，會啟動一臺服務(wù)器），去請求后端服務(wù)器，拿到數(shù)據(jù)，然后再傳給我們前端。如何拿呢：按照上面的代碼進行配置，axios.get后面的請求地址，原本是：第一張圖這樣子，

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

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

配置信息：

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

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

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

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

然后在配置文件中加一個屬性：pathRewrite

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

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