企业官网建设流程全解析

彻底理解「CORS policy: No ‘Access-Control-Allow-Origin’」跨域错误

作为编程新手，在前后端联调时经常会遇到如下报错：

Access to XMLHttpRequest at 'http://localhost:8120/login' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

本文将从问题本质、产生原因和解决方案三个层面，用通俗易懂的方式讲解这个错误。

一、理解报错信息

1. 核心概念：跨域（CORS）

浏览器遵循「同源策略」：只有当请求的协议、域名和端口完全一致时，才允许前端获取后端数据，否则就是跨域请求。

以报错为例：

• 前端运行在：http://localhost:3000
• 请求后端接口：http://localhost:8120/login
  由于端口不同（3000 vs 8120），属于跨域请求。若后端未配置允许跨域的响应头，浏览器就会拦截并报错。

2. 报错解析

总结：浏览器出于安全考虑阻止了跨域请求，因为后端未明确授权前端访问。

二、产生原因

浏览器设计「同源策略」是为了安全（如防止恶意网站窃取登录信息），但给开发带来不便。

跨域请求流程：

1. 前端发送请求到后端
2. 浏览器检查是否同源
3. 对于复杂请求（如POST），浏览器先发送OPTIONS预检请求
4. 若后端响应缺少Access-Control-Allow-Origin头，浏览器拦截请求

三、解决方案（按优先级）

方法1：后端配置跨域（推荐方案）

Spring Boot + Spring Security配置示例：

@Configuration@EnableWebSecuritypublicclassSecurityConfig{@BeanpublicSecurityFilterChainsecurityFilterChain(HttpSecurityhttp)throwsException{http.cors(cors->cors.configurationSource(corsConfigurationSource())).csrf(csrf->csrf.disable()).authorizeHttpRequests(auth->auth.requestMatchers(HttpMethod.OPTIONS,"/**").permitAll().requestMatchers("/api/**").permitAll().anyRequest().permitAll()).sessionManagement(session->session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)).formLogin(form->form.disable());returnhttp.build();}@BeanpublicCorsConfigurationSourcecorsConfigurationSource(){CorsConfigurationconfig=newCorsConfiguration();config.addAllowedOrigin("http://localhost:3000");config.setAllowCredentials(true);config.setAllowedMethods(Arrays.asList("GET","POST","PUT","DELETE","OPTIONS"));config.setAllowedHeaders(Arrays.asList("*"));config.setMaxAge(3600L);UrlBasedCorsConfigurationSourcesource=newUrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**",config);returnsource;}}

方法2：前端代理配置（临时方案）

当后端暂时无法修改时，前端可通过设置代理使请求"伪装"为同源请求。

Vue项目配置（基于Vite）：

exportdefaultdefineConfig({server:{proxy:{'/api':{target:'http://localhost:8120',changeOrigin:true}}}});

React项目配置：

{"proxy":"http://localhost:8120"}

方法3：重定向问题排查

检查：

1. 前端请求为何会跳转到不同端口？
2. 重定向后的接口路径是否正确？

四、常见错误与解决方案

1. 跨域配置层级问题

• 错误：仅在Controller层使用@CrossOrigin
• 解决方案：在SecurityConfig中配置全局跨域

2. Cookie跨域问题

• 错误：使用通配符*时尝试携带Cookie
• 解决方案：指定具体前端地址

3. 预检请求处理

• 错误：未放行OPTIONS请求
• 解决方案：添加requestMatchers(HttpMethod.OPTIONS, "/**").permitAll()

4. 无状态会话配置

• 错误：未配置无状态会话
• 解决方案：添加.sessionCreationPolicy(SessionCreationPolicy.STATELESS)

五、验证配置是否生效

使用浏览器开发者工具：

1. 按F12 → Network标签
2. 触发请求 → 查看Response Headers
3. 确认存在Access-Control-Allow-Origin: http://localhost:3000

六、总结

核心问题：浏览器因安全机制拦截跨域请求，需后端明确授权

解决方案：

1. 后端配置跨域（Spring Security项目需特别注意）
2. 前端代理是临时方案
3. 重点检查：放行OPTIONS请求、配置正确前端源、开启无状态会话

注意：确保启动类扫描到SecurityConfig所在包

上面的启动类要指定扫描你的SecurityConfig类所在包"com.exam.config"

-默认扫描行为 ：未显式指定@ComponentScan时，SpringBoot会扫描 启动类所在包及其所有子包 （即 com.exam 及其所有子包，包括 com.exam.config ）。-显式扫描覆盖 ：添加显式@ComponentScan(basePackages=...)后，默认扫描范围被完全覆盖，Spring仅扫描 指定的包路径 ，不会自动包含启动类所在包的子包。-配置失效原因 ：-移除"com.exam.config"后，您自定义的SecurityConfig.java （位于 com.exam.config 包）未被Spring容器加载-Spring使用了默认的WebSecurityConfiguration和 defaultSecurityFilterChain-默认配置没有您自定义的CORS设置（CorsConfigurationSource），导致跨域请求被拦截-默认配置启用了表单登录，将POST请求重定向至GET/login，进一步导致跨域请求失败