vue3项目跨域请求

1. 本地运行后端项目：http://localhost:8080

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'// https://vite.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, './src')}},base: '/',server: {// 端口号port: 3000,// 监听所有地址host: '0.0.0.0',// 服务启动时是否自动打开浏览器open: true,// 允许跨域cors: true,// 自定义代理规则proxy: {// 完整写法'/api': {target: 'http://localhost:8080', // 后端接口地址changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
})

 .env 设置HTTP请求默认地址：前端项目地址 + '/api'

VITE_BASE_URL=http://localhost:3000/api/

 2. PostMan Mock Server：https://your-key.mock.pstmn.io

PostMan：https://identity.getpostman.com/login

vite.config.ts

  proxy: {// 完整写法'/api': {target: 'https://your-key.mock.pstmn.io',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}

.env

VITE_BASE_URL=https://your-key.mock.pstmn.io

自行封装 http.ts 设置config的baseURL

// axios配置
const config = {baseURL: import.meta.env.VITE_BASE_URL, // 本地测试地址//   withCredentials: true, // 确保发送 cookiestimeout: 5000 // request timeout
}

http.ts 完整版

/** 封装axios **/
import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import { message, Modal } from 'ant-design-vue'
import { getToken } from './auth'
import { useAuthStore } from '@/stores/auth'
import { createVNode } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'// axios配置
const config = {// baseURL: '/server-address/', // 发布地址baseURL: import.meta.env.VITE_BASE_URL, // 本地测试地址//   withCredentials: true, // 确保发送 cookiestimeout: 5000 // request timeout
}// 定义返回值类型
export interface Result<T = any> {code: numbermsg: stringdata: T
}// axios封装
class Http {// 定义一个axios的实例private instance: AxiosInstance// 构造函数：初始化constructor(config: AxiosRequestConfig) {// 创建axios实例this.instance = axios.create(config)// 配置拦截器this.interceptors()}// 拦截器：处理请求发送和请求返回的数据private interceptors() {// 请求发送之前的处理this.instance.interceptors.request.use(config => {console.log(`==== ${config.url} ====`)console.log(config.data)// 修改headers的Content-Typeconfig.headers!['Content-Type'] = 'application/json'/** 在请求头部添加token **/let token = getToken() // 从cookies/sessionStorage里获取if (token) {// 添加token到头部config.headers!['Authorization'] = token}return config},error => {error.data = {}error.data.msg = '服务器异常，请联系管理员！'return error})// 请求返回数据的处理this.instance.interceptors.response.use((response: AxiosResponse) => {const { data } = response// 数据不解密const res = dataconsole.log(res) // res: { code: 200, data: null, msg: '请求成功' }if (res.code === 200) {return res.data} else if (res.code === 204) {// token过期 |无效Modal.warning({title: '提示',icon: createVNode(ExclamationCircleOutlined),content: '当前用户登录已超时，请重新登录！',onOk() {// console.log('ok')const authStore = useAuthStore()authStore.logout() // 执行退出}})} else {message.error(res.msg || '服务器出错！')return Promise.reject(new Error(res.msg || '服务器出错！'))}},error => {console.log('进入错误')error.data = {}if (error && error.response) {switch (error.response.status) {case 400:error.data.msg = '错误请求'breakcase 500:error.data.msg = '服务器内部错误'breakcase 404:error.data.msg = '请求未找到'breakdefault:error.data.msg = `连接错误${error.response.status}`break}message.error(error.data.msg || '服务器连接出错！')} else {error.data.msg = '连接到服务器失败！'message.error(error.data.msg)}return Promise.reject(error)})}/** RestFul api封装 **/// Get请求：注意这里params被解构了，后端获取参数的时候直接取字段名get<T = Result>(url: string, params?: object): Promise<T> {return this.instance.get(url, { params })}// Post请求post<T = Result>(url: string, data?: object): Promise<T> {return this.instance.post(url, data)}// Put请求put<T = Result>(url: string, data?: object): Promise<T> {return this.instance.put(url, data)}// DELETE请求delete<T = Result>(url: string): Promise<T> {return this.instance.delete(url)}
}
export default new Http(config)

/api/auth.ts

import http from '@/utils/http'
import type { LoginRequest, LoginResponse } from '@/types'/** 用户登录* @param username* @param password* **/
export const loginCheck = (params: LoginRequest): Promise<LoginResponse> => {return http.post('/login', params)
}// 测试接口-204token过期
export const testYY = (): Promise<null> => {return http.post('/yy/test')
}