Vue使用axios解决跨域请求

引入axios

// 导入这个的时候，不能使用 '{ }'
import axios from 'axios'

const service = axios.create({
  // 根据环境，取不同的请求地址
  baseUrl: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

export default service

跨域配置

在基本配置文件vue.config.js中添加如下配置

module.exports = {
  // 配置代理，解决跨域问题 - 配置说明
  // 所有请求[host:port/api/????]的接口都会重定向为:[target/????]
  devServer: {
    https: false,
    hot: false, // 热更 => hotOnly 要改为 hot
    port: 8080, // 本机的 8080 端口
    host: 'localhost', // 代理的主机
    proxy: {
      '/api': {
        target: 'http://localhost:9099', // 接口主机地址
        pathRewrite: {
          '^/api': '' // 重写规则: 以/api开头时，替换为空字符串
        }
      }
    }
  }
}