SpringBoot Vue 解决跨域问题

跨域问题是前后端分离项目中常见的问题之一。当前端项目（Vue）从后端项目（SpringBoot）请求数据时，如果请求的域名、端口或协议与当前页面不一致，那么浏览器就会阻止该请求，从而产生跨域问题。

本文将介绍如何使用SpringBoot和Vue一起解决跨域问题，并提供了一种简单易用的解决方案。

什么是跨域问题？

跨域问题，也称为同源策略限制，是浏览器出于安全考虑而设计的一种机制。同源策略要求，如果一个请求的域名、端口或协议与当前页面的不一致，那么浏览器将禁止该请求。

例如，当前页面的地址是 http://localhost:8080，如果页面中的JavaScript尝试发送请求到 http://example.com/api，那么该请求将被浏览器禁止。

解决方案

在SpringBoot中解决跨域问题非常简单，只需添加几行代码即可。在后端项目的主类中添加 @CrossOrigin 注解即可允许跨域请求。

@RestController
@CrossOrigin(origins = "http://localhost:8080")
public class UserController {
  // ...
}

上述代码中，@CrossOrigin 注解的 origins 参数指定了允许跨域请求的来源，这里我们允许来自 http://localhost:8080 的请求。

对于Vue项目，可以通过配置 vue.config.js 文件来解决跨域问题。在项目的根目录下创建并编辑 vue.config.js 文件，添加以下内容：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

上述代码中，target 参数指定了后端项目的地址，changeOrigin 参数设置为 true 表示请求时是否改变原始地址。这样，当前端项目发送请求至 /api 路径时，将会被代理到 http://localhost:8081/api。

示例

为了更好地理解和验证上述解决方案的有效性，我们可以创建一个简单的示例。

SpringBoot 后端示例

在SpringBoot项目中创建一个简单的 UserController 类，用于处理用户相关的请求。代码如下：

@RestController
@CrossOrigin(origins = "http://localhost:8080")
public class UserController {

  @GetMapping("/api/users")
  public List<User> getUsers() {
    List<User> users = new ArrayList<>();
    users.add(new User(1, "John"));
    users.add(new User(2, "Emma"));
    return users;
  }

  // ...
}

Vue 前端示例

在Vue项目中创建一个简单的页面，用于展示后端返回的用户数据。代码如下：

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get("/api/users").then((response) => {
        this.users = response.data;
      });
    },
  },
};
</script>

上述代码中，我们通过 axios 进行请求，并在 mounted 钩子函数中调用 getUsers 方法来获取用户数据。

总结

通过简单的配置和代码修改，我们可以轻松地解决SpringBoot和Vue项目中的跨域问题。后端项目通过 @CrossOrigin 注解允许跨域请求，前端项目通过配置 vue.config.js 文件实现跨域代理。

这种解决方案简单易行，并且不需要使用额外的库或工具，非常适用于中小型项目。希望本文对您有所帮助，谢谢阅读！

本文来自极简博客，作者：柠檬微凉，转载请注明原文链接：SpringBoot Vue 解决跨域问题