Vue-element-admin 模板实现跨域请求

思路

• 基于vue-element-admin 简单模板进行二次开发

• 首先我们要知道前端为什么有跨域，怎么样解决跨域，和在项目中实际应用

• 其次我们要知道api的二次封装和流程走向，这样我们就可以快速实现

什么是跨域

当我们协议 端口 域名 任何一个不一样之间进行资源请求的时候 就叫跨域。

注意点：跨域并不是请求发送不了，而是因为浏览器同源策略（同源策略要求源相同才能进行通信，要求域名，端

口，协议都完全一样），可以理解为请求发出去了，服务器接收到请求并正常返回了结果，返回回来的结

果被浏览器拦截了。

解决跨域的方法

• jsonp -- 不常用

  参考文档

• CORS -- 不常用

  参考文档

• 小型代理服务器

通俗讲 webpack就提供微型代理服务器 ，因为Vue基于webpack的所以Vue也是有这个功能的，我们只需

要在vue.config.js配置即可。如下

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      //标识
      '/api': {
        // 需要访问的地址
        target: 'http://192.168.2.66:8080',
        // 开启websocket 代理
        ws: true,
        // 开启代理
        changeOrigin: true,
        // 路径重写
        // api是我们写的它可以事任意值 比如我们在开发环境 VUE_APP_BASE_API = '/api' 
        // 但是实际开发接口没有拼接api 我们就可以通过路径重写在真实发送请求的时候把/api = 空
        // 也可以根据实际开发场景，改成其他值 '^/api' : '/其他值' 进行接口请求
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

vue接口二次封装

• src/utiles/request.js

• 安装与导入axios

• 创建axios副本，副 本中配制基地址

• 创建副本的请求拦截与响应拦截

• 暴露副本

• src/api/模块名.js

• 导入axios副本

• 定义api方法

• 导入方法使用

实际使用

开发环境地址 .env.development

# just a flag
ENV = 'development'
VUE_APP_BASE_API = '/api'

基地址 utils/ request.js

// 基地址
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // 5秒超时
  timeout: 10000
})
​
export default service

接口 api / 文件

import request from '@/utils/request'
​
// 查询设备数据
export function eqfirinquire (data) {
  return request({
    url: '/newEquipment/page',
    method: 'post',
    data
  })
}

跨域 上面图

整体流程

最终我们发送的请求地址为

http://192.168.2.88:8080/newEquipment/page

---

总结：

经过这一趟流程下来相信你也对 Vue-element-admin 模板实现跨域请求 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

有什么不足的地方请大家指出谢谢 -- 風过无痕