Spring Boot基础实验遇跨域报错：AJAX调用REST接口问题排查

你遇到的这个问题是典型的跨域请求限制导致的，大概率是因为你直接用本地文件协议（file://）打开HTML页面，去调用HTTP协议的Spring Boot接口——浏览器的同源策略不允许跨协议的请求，所以抛出了这个错误。下面给你几个可行的解决方案：

方案1：把HTML文件放到Spring Boot的静态资源目录（最简单） #

Spring Boot默认会加载src/main/resources/static或者src/main/resources/public目录下的静态文件，你只需要把HTML文件放到这两个目录中的任意一个，启动Spring Boot应用后，通过http://localhost:8080/你的文件名.html访问页面。这样HTML页面和REST接口处于同一个域名（同协议、同主机、同端口），就不会触发跨域限制了。

方案2：在Spring Boot中配置跨域支持（适合HTML和接口分开部署的场景） #

如果必须分开运行HTML页面和Spring Boot接口，那需要在Spring Boot中开启跨域请求支持，有两种方式：

方式一：给单个接口添加跨域注解 #

直接在你的接口方法上加上@CrossOrigin注解，允许指定来源的请求访问：

@RestController
@EnableAutoConfiguration
public class Pru {
    // 允许所有来源访问（生产环境建议指定具体域名，比如http://localhost:8081）
    @CrossOrigin(origins = "*")
    @RequestMapping("/hello")
    String hello() {
        return "hello world!";
    }
}

方式二：全局配置跨域（推荐，适合多接口场景） #

创建一个全局配置类，统一配置所有接口的跨域规则：

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 GlobalCorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 对所有接口生效
                .allowedOriginPatterns("*") // 允许所有来源（生产环境替换为具体域名）
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                .allowCredentials(true) // 是否允许携带Cookie
                .maxAge(3600); // 预检请求的缓存时间
    }
}

额外注意事项 #

• 如果你还是直接用file://打开HTML页面，即使配置了跨域，部分浏览器可能依然会限制请求。建议用本地HTTP服务器运行HTML页面，比如用Python命令：python -m http.server 8081，然后通过http://localhost:8081/你的文件名.html访问，这样页面和接口都是HTTP协议，跨域配置就能正常生效。
• 检查你的AJAX代码，确保请求URL正确（比如Spring Boot的端口是否为8080，URL有没有拼写错误），完整的AJAX示例：

$.ajax({
    type: "GET",
    url: "http://localhost:8080/hello",
    success: function(response) {
        console.log("请求成功：", response);
        // 这里可以处理返回结果
    },
    error: function(xhr, status, error) {
        console.error("请求失败：", error);
    }
});

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