解决CORS (跨源资源共享) 错误

问题引入

前端代码

<template><div id="hello-vue" class="demo">{{ message }}</div><el-button type="primary" @click="handleClick">我是一个按钮</el-button></template><script setup>//加了{}说明是解构导入,即导入整个对象
//本来应该是 import Vue from "vue";
import { ref } from "vue";
import axios from 'axios';// ****************定义响应式数据****************//
const message = ref("Hello Vue!!");
// ****************定义响应式数据****************//// ****************定义方法****************//
const  handleClick = async() => {message.value = "你点击了按钮!";const response =await axios.get('http://localhost:8080/pra');console.log(response.data);
};
// ****************定义方法****************//
</script><style lang="scss" scoped>
</style>

1.使用 @CrossOrigin 注解（后端）

如果你只需要对某个特定的控制器或方法启用 CORS，你可以在控制器或者方法上使用 @CrossOrigin 注解。

 @CrossOrigin(origins = "http://localhost:5173")  // 允许来自 http://localhost:5173 的请求

@RestController
public class PraController {@CrossOrigin(origins = "http://localhost:5173")  // 允许来自 http://localhost:5173 的请求@GetMapping("/pra")public Result getPra() {return Result.success("成功pra");}
}

"http://localhost:5173"改成你自己的前端端口

 

2.使用代理解决 CORS 问题（前端）

  server: {proxy: {'/pra': {target: 'http://localhost:8080',  // 后端服务器地址changeOrigin: true,  // 是否允许代理改变源rewrite: (path) => path.replace(/^\/pra/, '/pra'),  // 重写路径},},},

1. server.proxy

这是 Vite 配置中的一部分，用于设置开发服务器的代理规则。代理是通过 proxy 配置项来定义的，目的是将前端的某些请求转发到后端服务器（通常运行在不同的端口上）。

2. '/pra'

这是配置的代理规则的路径匹配。表示当前端发起一个以 /pra 开头的请求时，Vite 会将这个请求转发给配置中的 target 地址。比如，如果你访问 http://localhost:5173/pra（Vite 开发环境），它会被代理到 http://localhost:8080/pra（后端服务器）。

3. target: 'http://localhost:8080'

target 是代理的目标地址，也就是后端 API 服务器的 URL。在这里，所有匹配 /pra 路径的请求都会被转发到 http://localhost:8080，也就是你的后端服务器。

4. changeOrigin: true

changeOrigin 设置为 true 时，代理会修改请求的 Origin 头部，使其看起来是从目标地址（http://localhost:8080）发出的请求。通常，这对于解决跨域问题很有用，因为浏览器会检查请求的 Origin 头来判断是否允许请求跨域。

例如，当前端请求 http://localhost:5173/pra 时，浏览器会发送一个带有 Origin: http://localhost:5173 的请求头，而后端服务器只会接受来自 http://localhost:8080 的请求。changeOrigin: true 会让请求的 Origin 头变为目标地址的域名，即 http://localhost:8080，避免出现跨域问题。

5. rewrite: (path) => path.replace(/^\/pra/, '/pra')

• rewrite 是一个函数，它用于修改请求的路径。path 是匹配到的请求路径。

  举个例子，假设你配置的是：

  rewrite: (path) => path.replace(/^\/api/, '/v1/api')

  这样的话，/api/hello 会被重写为 /v1/api/hello，再转发给后端。path.replace(/^\/pra/, '/pra') 这段代码的意思是，当路径以 /pra 开头时，替换成 /pra，本质上它并不会改变路径，因为匹配的路径已经是 /pra，所以这段配置看起来是一个 "no-op"（即无操作）。这个配置在当前例子中没有实际效果，但通常可以用于对路径进行其他修改（比如删除前缀或添加其他部分）。

这个配置的作用是，当前端请求以 /pra 开头的路径时，Vite 会将请求转发到后端服务器 http://localhost:8080，并且会改变请求的 Origin 头部以避免跨域问题。rewrite 部分在当前配置中没有实际效果，但它通常用于修改请求路径，例如去掉前缀或添加其他路径部gaicgai'c