vue3+cli-service配置代理，跨域请求

一、配置代理端口和代理转发

在vue.config.js文件中 

const {defineConfig} = require('@vue/cli-service')module.exports = defineConfig({devServer: {host: '0.0.0.0',port: 8088,  // 启动端口号proxy: {'/api': { // 请求接口中要替换的标识target: '', // 代理地址，后端地址ChangeOrigin: true, // 是否允许跨域pathRewrite: {'^/api': '' // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可}}}}
})

二、配置接口请求

是一个http.js文件，根据自己需求放在适合的文件夹里，文件名自己也可以定义

import axios from 'axios'
const isDev = process.env.NODE_ENV === 'development'
const instance = axios.create({//TODO 部署修改线上地址// baseURL: isDev ? 'http://localhost:8088/api' : '线上地址',baseURL: '/api',timeout: 10000,withCredentials: true,
})// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 前端发送请求成功const res = response.data//根据返回的code值来做不同处理// 请求失败，返回错误信息if (res.code !== 0) {// 未登录跳转登录页面if (res.code === 40100) {const redirectUrl = window.location.hrefwindow.location.href = `/user/login?redirect=${redirectUrl}`}console.error('request error', res.message)return res.message}return res},function (error) {// 超出 2xx 范围的状态码都会触发该函数。return Promise.reject(error)},
)/*** get请求* @param url 请求地址* @param params 请求参数*/
export function getRequest(url, params) {return instance({method: 'GET',url: `${url}`,params: params,})
}/*** post请求* @param url 请求地址* @param data 请求数据* @returns {Promise}*/
export function postRequest(url, data) {return instance({method: 'POST',url: `${url}`,data,})
}export default instance

在api/indexjs文件里使用

import { getRequest, postRequest } from '@/plugins/requestConfig'export const userLogin = (params) => {return postRequest('/user/login', params)
}

注意：

1、代理地址target后面不要加注释，线上可能会报错

2、本地测试的时候baseURL: '/api'和proxy里的'/api'名字保持一致，且必须有不然会报跨域

3、pathRewrite里的'^/api': '' "跟后端保持一致，如果后端接口里有api可以不用加，如果没有则需要进行该处理，不然接口请求会报404，