1.在vue.config.js里面配置
devServer: { port: 8080, // 端口号 host: 'localhost', https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 proxy: { '/Class': { target: process.env.VUE_APP_BASE_URL, // 要访问的接口域名 // target: 'http://xxxxxxxx', // 要访问的接口域名 //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据， //并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 changeOrigin: true, pathRewrite: { //这里理解成用'/api'代替target里面的地址, // 比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可 '^/Class': '', }, }, }, },
2.封装 axios
` import axios from 'axios' // import { MessageBox } from 'element-ui' // import store from '@/store'
// create an axios instance const service = axios.create({ baseURL: '', // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 60 * 1000, // request timeout })
// request interceptor service.interceptors.request.use( (config) => { return config }, (error) => { return Promise.reject(error) } )
// response interceptor service.interceptors.response.use( (response) => { console.log(response, '请求状态') return }, (error) => { console.log('后台返回来的报错', error.response.data.Msg) return Promise.reject(error) } )
export default service `
