【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') */ },