当前位置：首页 > article >正文

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

article 2024/11/7 9:37:54

问题引入

前端代码


<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

查看全文

http://www.kler.cn/a/382796.html