vue项目解决跨域问题

修改request.js文件

由于发起ajax请求的域为http://localhost:5173, 而后台服务器的域为 http://localhost:8080, 所以浏览器会限制该请求的发送, 这种问题称为跨域问题, 跨域问题可以在服务器端解决,也可以在浏览器端解决, 可以通过配置代理的方式解决

request.js中配置统一前缀 /api

//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})


//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

vie.config.js中配置代理
在这个文件中加入server，如果遇到api的就转发给8080端口

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  //配置代理
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端服务器地址
        changeOrigin: true, // 是否改变请求域名
        rewrite: (path) => path.replace(/^\/api/, '')//将原有请求路径中的api替换为''
      }
    }
  }
})

这个正则表达式 /^/api/ 可以解释为：

^: 表示匹配字符串的开始。
/: 匹配斜杠字符 /。由于正斜杠 / 在正则表达式中具有特殊含义，因此需要使用反斜杠 \ 进行转义，以确保匹配实际的斜杠字符。
api: 匹配字面的字符 “api”。
综合起来，/^/api/ 表示一个正则表达式，用于匹配以 “/api” 开头的字符串。在实际使用中，这种匹配模式经常用于重写（rewrite）URL 路径，将以 “/api” 开头的路径部分去除或替换为其他内容。在你提供的代码中，这个正则表达式被用于将路径中以 “/api” 开头的部分替换为空字符串，即去除了 “/api”。