【Vue】代理服务配置

 

Springboot 后台接口地址

基础路径配置：

server:
  port: 8080
  servlet:
    context-path: /demo

　　

完整路径：

localhost:8080/demo

　　

 

Vue无代理服务配置

.env.development文件配置后台接口和对应path

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_DOMAIN = 'http://localhost:8080'
VUE_APP_BASE_API = '/demo'

 

在utils/request.js文件中，更改基础地址：

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

/**
 * create an axios instance
 * 创建 axios实例
 * @type {AxiosInstance} axios实例
 */
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_DOMAIN + process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 请求超时时间 request timeout
})

 

npm run dev 重启后 接口就是请求后台的了

但是没有配置代理服务，请求会出现一个问题：每个请求都会附带一个[OPTION]预检请求

开发的时候混在一起调试很麻烦

 

Vue 代理服务配置

定义目标接口，目标API的路径，和代理路径

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_DOMAIN = 'http://localhost:8080'
VUE_APP_BASE_API = '/demo'
VUE_APP_PROXY_API = '/proxy-api'

　　

Request.js只需要填写代理路径，默认拼接web地址为前缀

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

/**
 * create an axios instance
 * 创建 axios实例
 * @type {AxiosInstance} axios实例
 */
const service = axios.create({
  baseURL: process.env.VUE_APP_PROXY_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 请求超时时间 request timeout
})

 

Vue.config.js配置devServer时，追加代理配置：

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    /* 配置代理服务，解决接口跨域访问问题 */
    proxy: {
      /* 匹配所有以[代理路径]开头的路径 */
      [process.env.VUE_APP_PROXY_API]: {
        /* 代理目标的基础路径 就是实际后台接口 */
        target: process.env.VUE_APP_BASE_DOMAIN,
        /* 路径重写，匹配[代理路径]开头的字符串，并把[代理路径]替换为空字符串 路径重写时把[代理路径]替换回[实际Api路径] */
        pathRewrite: { [`^${process.env.VUE_APP_PROXY_API}`]: process.env.VUE_APP_BASE_API },
        /* 支持websocket */
        ws: true,
        /* 请求来自于。即控制请求头中host数据。默认为true说谎:来自8080; false如实回答来自代理服务器8081 */
        changeOrigin: true
      }
    }
    /* 不使用mockJS的接口数据 */
    /* before: require('./mock/mock-server.js') */
  },