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, // 确保发送 cookies
  timeout: 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, // 确保发送 cookies
  timeout: 5000 // request timeout
}

// 定义返回值类型
export interface Result<T = any> {
  code: number
  msg: string
  data: 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-Type
        config.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 = data
        console.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 = '错误请求'
              break
            case 500:
              error.data.msg = '服务器内部错误'
              break
            case 404:
              error.data.msg = '请求未找到'
              break
            default:
              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')
}