返回

解开 CorsConfig 谜团：后端数据跨域畅通无阻

后端

跨域连接：通过 CorsConfig 实现前后端数据无障碍

跨域的奥秘

跨域请求，即来自不同域名、协议或端口的资源请求，出于安全考虑，浏览器会触发 CORS（跨域资源共享）机制，限制资源的访问。CorsConfig 正是解开跨域难题的密钥。

配置 CorsConfig

在 SpringBoot 中，我们可以使用 CorsConfig 配置跨域规则。一个简单的示例如下：

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); // 允许携带 cookie
        config.addAllowedOrigin("*"); // 允许所有域名跨域请求
        config.addAllowedHeader("*"); // 允许所有请求头
        config.addAllowedMethod("*"); // 允许所有请求方法
        source.registerCorsConfiguration("/**", config); // 对所有路径开放跨域
        return new CorsFilter(source);
    }

}

从后端到前端

配置好 CorsConfig 后，我们就可以畅通无阻地将后端数据传输到前端。例如，一个查询用户列表的方法：

@RestController
@RequestMapping("/api/users")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping
    public List<User> list() {
        return userService.list();
    }

}

在前端，使用 Vue.js 发起跨域请求：

import axios from 'axios';

export default {
    data() {
        return {
            users: []
        }
    },
    created() {
        axios.get('/api/users').then(res => {
            this.users = res.data;
        })
    }
}

分页查询

为了提高效率，我们引入分页功能。后端修改查询方法：

@GetMapping
public Page<User> list(@RequestParam Integer page, @RequestParam Integer size) {
    return userService.list(page, size);
}

前端添加分页逻辑：

export default {
    data() {
        return {
            users: [],
            page: 1,
            size: 10
        }
    },
    created() {
        this.listUsers();
    },
    methods: {
        listUsers() {
            axios.get(`/api/users?page=${this.page}&size=${this.size}`).then(res => {
                this.users = res.data.content;
            })
        }
    }
}

结语

通过 CorsConfig 的加持，我们成功实现了前后端数据跨域连接，并实现了分页查询功能。这是一个激动人心的进步，让我们继续探索管理系统的更多奥秘。

常见问题解答

  1. 为什么要使用 CorsConfig？
    CorsConfig 用于解决跨域请求限制问题，允许不同来源的数据安全交互。

  2. CorsConfig 的作用是什么？
    CorsConfig 允许自定义跨域规则，例如允许携带 cookie、允许特定域名或请求方法。

  3. 如何配置 CorsConfig？
    在 SpringBoot 中，可以通过创建一个 CorsConfig Bean 来配置跨域规则。

  4. 如何从后端传输数据到前端？
    可以使用 RESTful API 接口，如 @RestController，从后端返回 JSON 数据，然后在前端使用 axios 等库发起请求。

  5. 如何实现分页查询？
    在后端定义一个分页查询方法，并在前端使用分页控件或 axios 的 query 参数发起分页请求。