Spring Boot+React跨域请求失败求助：CORS报错及404状态码

首先注意错误信息里的404状态码——这说明你的请求根本没到达Spring Boot后端，先解决这个核心问题，再处理CORS配置：

一、排查ngrok映射有效性 #

1. 确认ngrok启动命令正确性：必须执行ngrok http 8080，确保将外部请求转发到本地8080端口（你的Spring Boot后端运行端口）。
2. 验证ngrok地址可用性：直接在浏览器访问https://9c96-103-106-239-104.ap.ngrok.io/api/v1/movies，如果返回404，说明映射失效，检查：
   • 本地后端是否在8080端口正常运行
   • ngrok会话是否过期（免费版ngrok地址会定期更换）
   • 启动ngrok时是否指定了错误端口

二、正确配置Spring Boot CORS（全局配置更可靠） #

控制器上的@CrossOrigin注解有时会因配置优先级、路径匹配等问题不生效，建议使用全局CORS配置：

创建CORS配置类：

package dev.harshaNeelathi.movies_app;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/v1/**") // 匹配所有api/v1前缀的路径
                .allowedOrigins("http://localhost:3000", "https://9c96-103-106-239-104.ap.ngrok.io") // 允许的前端地址
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                .allowedHeaders("*") // 允许所有请求头
                .maxAge(4800);
    }
}

开发环境若需临时允许所有来源，可将allowedOrigins改为"*"，但生产环境禁止这么做。

三、前端配置检查 #

1. 确认axios的baseURL是当前有效的ngrok地址——免费版ngrok每次重启地址都会变更，避免使用过期地址。
2. 核对请求路径：api.get("/api/v1/movies")与后端@RequestMapping("/api/v1/movies")的@GetMapping完全匹配，路径本身无问题，但需确保ngrok转发后路径未被篡改。

四、其他注意事项 #

• 恢复Chrome默认设置：关闭跨域插件、取消安全设置修改，这类操作会干扰正常CORS验证逻辑。
• 重启Spring Boot应用：修改CORS配置后必须重启后端，否则新配置不会生效。

内容的提问来源于stack exchange，提问作者Harsha vardhan