解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head

记录一次关于跨域的bug,搞了我好久

前端浏览器控制台报错：center.html:1 Access to XMLHttpRequest at \'http://localhost:8080/xinlijiankangxitong/dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types&t=1741853245777\' from origin \'http://localhost:63342\' has been blocked by CORS policy: Response to preflight request doesn\'t pass access control check: No \'Access-Control-Allow-Origin\' header is present on the requested resource.

 这里显示接口没正常返回数据

 但是我用接口测试工具发现，接口功能是正常的

前端浏览器直接发送地址请求也是正常的

 然后我又在后端加了这个配置类，但发现还是不行

最终，功夫不负有心人，我在对应的接口上加了@CrossOrigin注解，终于跑通了，前端浏览器控制台不再报错，接口正常返回数据

 

 最终发现还是注解好使！

下面是对@CrossOrigin注解的一些补充知识

一、@CrossOrigin 的作用

@CrossOrigin 是 Spring Framework 4.2+ 引入的注解，用于在服务端启用跨域请求支持。通过该注解，开发者可以灵活配置允许哪些源（Origin）、HTTP 方法、请求头等跨域访问资源。

二、使用场景

1. 前后端分离架构：前端（如 React、Vue）运行在 http://localhost:3000，后端 API 部署在 http://localhost:8080。

2. 微服务间跨域调用：不同子域或端口的服务需要共享资源。

3. 第三方 API 集成：允许外部域名的合法请求访问接口。

三、核心配置参数

@CrossOrigin 支持以下常用属性：

参数 作用 示例值 origins 允许的源（支持多个） origins = {\"http://a.com\", \"http://b.com\"} value origins 的别名 value = \"http://localhost:3000\" allowedHeaders 允许的请求头（如认证头 Authorization） allowedHeaders = \"*\"（允许所有） methods 允许的 HTTP 方法 methods = {RequestMethod.GET, RequestMethod.POST} maxAge 预检请求（Preflight）的缓存时间（秒） maxAge = 3600（1小时） allowCredentials 是否允许发送 Cookie（默认 false） allowCredentials = true

---

四、使用方法

1. 控制器方法级

为单个接口启用跨域支持：

@RestControllerpublic class UserController { @CrossOrigin(origins = \"http://localhost:3000\") @GetMapping(\"/users\") public List getUsers() { // ... }}

2. 控制器类级

为整个控制器的所有接口启用跨域：

@CrossOrigin(origins = \"http://localhost:3000\", maxAge = 3600)@RestControllerpublic class ProductController { // 所有接口支持跨域}

3. 全局配置（推荐）

通过实现 WebMvcConfigurer 配置全局跨域规则（适用于所有接口）：

@Configurationpublic class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(\"/**\") // 所有路径 .allowedOrigins(\"http://localhost:3000\") .allowedMethods(\"GET\", \"POST\", \"PUT\", \"DELETE\") .allowedHeaders(\"*\") .allowCredentials(true) .maxAge(3600); }}

---

五、注意事项

1. 安全风险：避免使用 origins = \"*\" 允许所有源，应根据实际需求限制来源。

2. 携带凭证：若启用 allowCredentials = true，则 origins 不能为通配符 *，需明确指定域名。

3. 预检请求：复杂请求（如 Content-Type: application/json）会先发送 OPTIONS 请求，确保服务端正确处理。

4. 与 Spring Security 结合：若项目集成 Spring Security，需确保其配置不覆盖 CORS 设置，例如：

   java

   复制

   @BeanSecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http.cors(Customizer.withDefaults()); // 启用 Spring Security 的 CORS 支持 return http.build();}

---

六、总结

@CrossOrigin 提供了简洁的注解驱动方式解决跨域问题，适用于快速开发场景。对于企业级应用，建议通过全局配置统一管理跨域规则，兼顾安全性和可维护性。通过合理配置来源、方法和头信息，既能保障接口的开放性，又能有效防范潜在的安全风险。

最近，华为云与硅基流动联合推出了一款强大的 AI 模型——满血版 DeepSeek R1。这款模型不仅性能强大，更重要的是，注册即送 2000 万 Token！对于开发者、研究人员和 AI 爱好者来说，这无疑是一个巨大的福利。那么，2000 万 Token 到底是什么概念？点击这里注册

2000 万 Token 是什么概念？
2000 万 Token 听起来很多，但具体是多少呢？我们可以通过一个简单的类比来理解：

假设一本普通的小说，每页有 300 个汉字（中文）或者 300 个单词（英文），那么 2000 万 Token 相当于大约 6.6 万页的书。

如果按照一本 300 页的书来算，那就是 220 多本书。这相当于一个超大书架的藏书量！

对于开发者来说，2000 万 Token 足以支持大量的文本生成、翻译、摘要等任务，是一个非常慷慨的额度。点击这里注册