二、vue项目 Axios封装 和跨域问题

一、封装Axios对象

安装axios详情见文章1

1、在src 目录下创建 utils 目录及 utils 下面创建 request.js 文件

2、进行封装

import axios from 'axios'

const request = axios.create({
    baseURL: '/',
    timeout: 5000 //请求超时,5000毫秒
})

// 请求拦截器
request.interceptors.request.use(config => {
    // 请求拦截
    return config
}, error => {
    // 出现异常
    return Promise.reject(error);
})

// 响应拦截器
request.interceptors.response.usr(response =>{
     //response.data
     return response
},error=>{
    return Promise.reject(error)
})

export default  request//导出自定义创建 axios 对象

3、测试 新建 src/test.js 和新建测试数据

测试数据db.json

src/api/test

import request from '@/utils/request'

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

在文件测试

<script>
import testApi from '@/api/test';

export default {
  data(){
    return{
      list:[]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData(){
      testApi.getList().then(response=>{
        console.log("get3",response.data)
        this.list=response.data
      })
    }
  },
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

二、跨域问题

1、什么是跨域

前后端分离时，前端和后端API服务器可能不在同一台主机上，就存在跨域问题，浏览器限制了跨域访问。
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。

2、跨域解决

通过代理请求的方式解决，将 API 请求通过代理服务器请求到 API 服务器。
开发环境中，在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置。
参考：https://cli.vuejs.org/zh/config/#devserver

module.exports = {
    devServer: {
        port: 8888, // 端口号，如果端口号被占用，会自动提升1
        host: "localhost", //主机名， 127.0.0.1， 真机 0.0.0.0
        https: false, //协议 
        open: true, //启动服务时自动打开浏览器访问 
        proxy: { //开发环境代理配置
            //'/dev-api':{
            [process.env.VUE_APP_BASE_API]: {
                //目标服务器地址:
                target: process.env.VUE_APP_SERVICE_URL,
                changeOrigin: true, //开启代理服务器
                pathRewrite: {
                    // /dev-api/db.json 最终会发送 http://localhost:8001/db.json
                    // 将 请求地址前缀 /dev-api 替换为 空的，
                    // '^/dev-api': '', 
                    [ '^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    },
    lintOnSave: false, // 关闭格式检查
    productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度 

}
}

3、 配置不同环境 常量值

1、根目录下创建 .env.development 和 .env.production 文件

2、 .env.development 文件配置

# 只有以 VUE_APP_ 开头的变量会被 webpack 静态嵌入到项目中进行使用 process.env.VUE_APP_xxxxxx

# 目标服务接口地址，这个地址是按照你自已环境来的, 添加 或者更改配置后，需要重启服务
VUE_APP_SERVICE_URL = 'http://localhost:8001'

# 开发环境的前缀
VUE_APP_BASE_API = '/dev-api'

3、 .env.production 文件配置

VUE_APP_BASE_API = '/pro-api'

4、vue.config.js文件修改

import axios from 'axios'

const request = axios.create({
    // 通过axios> /dev-api/xx
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 5000 //请求超时,5000毫秒
})

// 请求拦截器
request.interceptors.request.use(config => {
    // 请求拦截
    return config
}, error => {
    // 出现异常
    return Promise.reject(error);
})

// 响应拦截器
request.interceptors.response.use(response =>{
     //response.data
     return response
},error=>{
    return Promise.reject(error)
})




export default  request//导出自定义创建 axios 对象