Vue 代理请求

为什么要代理请求呢？说到底还是为了解决跨域问题。

前言

在 github 找到了一个网易云的后台 API 文档，自己用服务器搭建起来了一个小的接口地址。直接在浏览器中打开API 地址是可以拿到数据的，但是放在开发项目中，却出现了跨域问题。

本文就是通过代理请求去解决这个问题的。

因为没有新版的 vue-cli 没有 dev-server.js 这个文件了，因为它被合并到了 webpack.dev.conf.js 文件中。

准备工作

我们需要一个 API 接口地址，以及安装 axios 插件。

安装 axios 插件。

npm install axios --save

修改 webpack.dev.conf.js

// webpack.dev.conf.js

const portfinder = require('portfinder')

// 我们代码写在这之后
const express = require('express')
const axios = require('axios')
const defaultUrl = 'http://106.52.238.52:3000/'
const defaultHost = '106.52.238.52:3000'
const app = express()
const apiRoutes = express.Router()
app.use('/api', apiRoutes)

devServer: {
    // 这里新增 before 对象
    before(app) {
      // 登录接口
      // 代理的虚拟地址
      app.get('/api/login/cellphone', function (req, res) {        
      const url = defaultUrl + 'login/cellphone'
        // url 真实的请求地址
        axios.get(url, {
          // 模拟请求头
          headers: {
            referer: defaultUrl,
            host: defaultHost
          },
          // 请求参数
          params: req.query
        }).then((response) => {
          res.json(response.data)
        }).catch((error) => {
          res.json(error.data)
        })
      })
    }
}

修改请求文件

为了代码的方便维护，我们会建一个 api 的文件夹，里面放关于请求的方法，这里我是在 src 目录下，新建了一个 api 文件夹，在文件夹中新增了 login.js 的文件

// login.js

import axios from 'axios'

export function getLoginInfo (parameter) {
  const url = '/api/login/cellphone'
  const data = Object.assign({}, parameter)
  return axios.get(url, {
    params: data
  })
    .then((res) => {
      return Promise.resolve(res.data)
    })
    .catch((error) => {
      return Promise.resolve(error.data)
    })
}

到组件中去使用

// ERR_OK 是成功状态码，自行定义即可
// data 是传入的参数，也是自行定义即可
getLoginInfo(data)
.then((res) => {
  if (res.code === ERR_OK) {
    message.success('登录成功', 3, () => {
      this.$router.push({ path: '/home' })
    })
  } else {
    message.error('账号或密码错误', 3)
  }
})