Vue--封裝axios、跨域

封裝axios

因為項目中很多組件中要通過Axios發送異步請求，所以封裝一個Axios對象。自己封裝的Axios在后續可以使用axios中提供的攔截器。

在src下創建一個utils目錄，在utils目錄下創建一個request.js文件

在public下創建一個db.json文件，寫點數據，用來我們測試

之前我們使用axios發送請求的時候是使用的下面的方式

[
    {
        "name":"張三",
        "age":17
    },
    {
        "name":"李四",
        "age":52
    },
    {
        "name":"王五",
        "age":37
    }
]

import axios from 'axios'

axios.get('./db.json').then(response =>{
    console.log(response.data)
})

在components下的HelloWorld.vue中引用測試一下

在瀏覽器 的控制台就可以看到db.json里的數據，這種方法是我們之前的方法，現在我們要封裝。

修改request.js文件

import axios from 'axios'


const request = axios.create({
    baseURL: '/',     //基礎路徑,根據不同環境設置 baseURL, 最終發送請求時的URL為: baseURL + 發送請求時寫URL ,
    timeout: 5000     //超時時間，5000毫秒
})

export default request  // 導出自定義的axios對象

我們自己封裝好了axios，那怎么測試知道我們封裝的有沒有問題，我們來進行測試

在src目錄下創建一個api目錄，在下面創建一個test.js文件

在test.js文件里寫入如下代碼

// @就是src目錄的路徑
import request from '@/utils/request'


// 下面的這種是使用最原始的方式來發送get請求
// request.get('/db.json').then(response =>{
//     console.log(response.data)
// })


// 以對象配置的方式進行指定請求方式
// request({
//     method: 'get',
//     url: '/db.json'
// }).then(response =>{
//     console.log('對象方式', response.data)
// })

export default {
    getList(){
        const res = request({
            method: 'get',
            url: '/db.json'
        })
        return res
    }
}

在HelloWorld.vue的script標簽里寫如下代碼

<script>
// 導入接口
import testApi from '@/api/test'
export default{
  data(){
    return{
      list: {}
    }
  },
  created(){  // 調用method里的fetchData方法
    this.fetchData()
  },
  methods: {
    fetchData(){
      testApi.getList().then(response =>{
        console.log('get3',response.data)
        this.list = response.data // 給data里的list重新賦值
      })
    }
  }
}

// export default {
//   name: "HelloWorld",
//   props: {
//     msg: String
//   }
// };
</script>

屬性瀏覽器，控制台里可以看到db.json里的數據，則我們的配置是沒有問題的。

 

跨域

前后端分離時，前端和后端API服務器可能不在同一台主機上，就存在跨域問題，瀏覽器限制了跨域訪問。

同源策略：是指協議，域名，端口都要相同，其中有一個不同都會產生跨域。

如下面示例存在跨域：

前端頁面部署在：http://localhost:8001 即本地ip端口8001上；

后端API部署在： http://localhost:8002 即本地ip端口8002上 ;

它們IP一樣，但是端口不一樣，所以存在跨域問題。

演示跨域：

1.將 zz-mms\db.json 拷貝到 axios-demo\public\ 目錄下，axios-demo 工程就是 復制了zz-mms 重命名了

2.axios-demo\vue-config.js 更改 端口號, 將端口號更改為 8001

3. 啟動 axios-demo

npm run serve

啟動后，查看控制台顯示的訪問地址，我的是 http://localhost:8001/

4. 查詢是否可以直接訪問到數據, 訪問 http://localhost:8001/db.json

5. 修改 zz-mms\src\api\test.js , 發送請求給 8001 接口，修改下  BASE_URL 值

const BASE_URL = 'http://localhost:8001' 

6. 重新刷新 頁面, 查看控制台報錯, 出現跨域問題.

跨域解決:

通過代理請求的方式解決，將 API 請求通過代理服務器請求到 API 服務器。

開發環境中，在 vue.config.js 文件中使用 devServer.proxy 選項進行代理配置。

參考：https://cli.vuejs.org/zh/config/#devserver

解決開發環境跨域問題

在  vue.config.js 文件中使用  devServer.proxy 選項進行代理配置

module.exports = {
    devServer: {
        port: 8888, // 端口號，如果端口被占用，會自動加1
        host: "localhost",  // 主機名，127.0.0.1  真機 0.0.0.0
        https: false,  // 協議
        open: true,  // 啟動服務時自動打開瀏覽器訪問
        proxy: {  // 開發環境代理配置
            'dev-api':{  // 匹配 /dev-api 開頭的請求，
                // 目標服務器地址，代理訪問http://localhost:8001
                target: 'http://localhost:8001',
                changeOrigin: true,  // 開啟代理服務器
                pathRewrite:{
                    //  會將 /dev-api 替換為 '',也就是 /dev-api 會移除，
                    // 如 /dev-api/db.json 代理到 https://localhost:8080/db.json
                    '^dev-api': ''
                }
            }
        }

    },
    lintOnSave: false,  // 關閉格式檢查
    productionSourceMap: false // 打包時不會生成.map文件，加快打包速度
}

 將 test.js 中的 修改如下：

// @就是src目錄的路徑
import request from '@/utils/request'


const BASE_URL = '/dev-api'

export default {
    getList(){
        const res = request({
            method: 'get',
            url: BASE_URL + '/db.json'
        })
        return res
    }
}

重啟項目，防止不生效

 配置不同環境 常量值

參考：https://cli.vuejs.org/zh/guide/mode-and-env.html

開發環境請求 Mock.js 獲取數據，開發環境請求后台接口獲取數據，不同環境請求的URL不一樣，所以要為不同環境匹配不同請求接口URL，通過路徑前綴進行匹配。當前只針對開發環境，后面會生產部署再講生產如何實現。

1. 在 zz-mms 根目錄下創建 .env.development 和 .env.production 文件，

.env.development 文件配置（注意開發和生產環境配置不要搞反了）

VUE_APP_SERVICE_URL 值可更改為你自已配置的 Easy-Mock 接口服務地址

# 使用 VUE_APP_ 開頭的變量會被 webpack 自動加載，process.env.VUE_APP_xxx

# 開發環境的前綴
VUE_APP_BASE_API = '/dev-api'

# 目標服務接口地址，是按照自己的環境來的，添加或更改服務后，需要重啟服務
VUE_APP_SERVICE_URL = 'http://localhost:8001'

測試：在 main.js 中添加以下代碼，看下瀏覽器控制台是否會輸出

在項目任意模塊文件中，都可以使用 process.env.VUE_APP_BASE_API 獲取值

console.log(process.env.VUE_APP_BASE_API)

重構代理配置

在重構 vue.config.js 中的  devServer.proxy 代理配置

module.exports = {
    devServer: {
        port: 8888, // 端口號，如果端口被占用，會自動加1
        host: "localhost",  // 主機名，127.0.0.1  真機 0.0.0.0
        https: false,  // 協議
        open: true,  // 啟動服務時自動打開瀏覽器訪問
        proxy: {  // 開發環境代理配置


                   [process.env.VUE_APP_BASE_API]:{  // 自動獲取，注意要[],在.env.development里配置的
                // 目標服務器地址，在.env.development里配置的。代理訪問http://localhost:8001
                target: process.env.VUE_APP_SERVICE_URL,
                changeOrigin: true,  // 開啟代理服務器
                pathRewrite:{
                    
                    ['^' + process.env.VUE_APP_BASE_API]: ''  // 自動獲取
                }
            }
        }

    },
    lintOnSave: false,  // 關閉格式檢查
    productionSourceMap: false // 打包時不會生成.map文件，加快打包速度
}

修改  utils/request.js 文件配置：  baseURL: process.env.VUE_APP_BASE_API

import axios from 'axios'



const request = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, //基礎路徑,.env.development
    timeout: 5000 //超時時間，5000毫秒
})

// request.get('./db.json').then(response =>{ // 使用request。而不是使用axios
//     console.log(response.data)
// })
export default request  // 導出自定義的axios對象

去掉 test.js 中的  BASE_URL 

// @就是src目錄的路徑
import request from '@/utils/request'



export default {
    getList(){
        const res = request({
            method: 'get',
            url: '/db.json'
        })
        return res
    }
}

重啟項目，再次訪問