通过配置代理解决跨域问题（Vue+SpringBoot项目为例）

跨域问题：

是由浏览器的同源策略引起的，同源策略是一种安全策略，用于防止一个网站访问其他网站的数据。

同源是指协议、域名和端口号都相同。

跨域问题常常出现在前端项目中，当浏览器中的前端代码尝试从不同的域名、端口或协议发出请求时，浏览器会因为同源策略而拒绝该请求。

为了解决跨域问题，可以通过配置代理来绕过浏览器的同源策略。

具体来说，可以在前端项目的配置中设置代理规则，将某些请求路径转发到同源的后端服务器。

例如：

基于vue项目来说：

可以在request.js配置baseURL的值为/api

request.js:

//定制请求的实例

//导入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;

在vite.config.js里面配置代理:

其实就是将原来的浏览器的http://127.0.0.1:5174/api替换成了http://localhost:8080，

这样就解决了跨域的问题

代理的原理是将前端的请求发送到同源的后端服务器，由后端服务器再发送到目标服务器，并将响应返回给前端。这样前端代码实际上是与同源的后端服务器进行通信，而不是与目标服务器直接通信，从而避免了跨域问题。

vite.config.js：

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/, '')// 重写路径
      }
    }
  }
})