vue如何使用反向代理解決跨域問題

這篇文章主要講解了“vue如何使用反向代理解決跨域問題”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue如何使用反向代理解決跨域問題”吧！

為什么要解決跨域問題

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

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

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

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

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

用axios向后端數據接口發起請求，拿回數據：

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

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

import axios from 'axios' 發axios請求：

后端數據接口：貓眼驗證中心

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": ""
        }
      }
    }
}

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

配置模板文件及字段解釋

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

整個配置反向代理的思路

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

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

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

配置信息：

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

解決接口重復問題

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

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

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

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

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

感謝各位的閱讀，以上就是“vue如何使用反向代理解決跨域問題”的內容了，經過本文的學習后，相信大家對vue如何使用反向代理解決跨域問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！