无法用jQuery调用Spring REST API问题排查求助

首先，最可能导致你遇到这个问题的核心原因是跨域资源共享（CORS）限制——浏览器的同源策略会阻止前端页面从不同域名（或端口、协议）的后端获取数据。哪怕你的后端部署在本地Tomcat或者Heroku上，只要前端和后端不在同一个"源"下，就会触发这个限制。

接下来我们一步步排查并解决：

1. 优先解决CORS配置缺失问题 #

Spring Boot默认是不允许跨域请求的，你参考的Spring教程里，后端和前端是放在同一个应用里（静态资源和API同部署），所以不存在跨域问题；但你的场景是前端和后端分开部署（或者本地直接打开HTML文件，协议是file://，和Tomcat的http://localhost:8080不属于同源），因此必须在Spring Boot后端配置CORS规则。

两种配置方式任选： #

• 全局配置（适合所有API接口）：创建一个配置类，开发环境可以允许所有源，生产环境建议指定具体前端域名：

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路径生效
                .allowedOrigins("*") // 开发环境允许所有源，生产替换为你的前端域名
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

• 局部配置（仅对指定控制器/方法生效）：在你的API控制器类或方法上添加@CrossOrigin注解：

@RestController
@RequestMapping("/books")
@CrossOrigin(origins = "*") // 允许跨域访问
public class BookController {
    // 你的API实现方法
}

2. 检查请求URL的协议一致性 #

你提到API的地址是http://books-anzu.herokuapp.com/books/1，但jQuery脚本里用的是https://books-anzu.herokuapp.com/books/1。Heroku应用默认支持HTTPS，但如果你的后端没有配置SSL相关逻辑，HTTPS请求可能会报错（比如证书验证失败、重定向异常）。

建议先在浏览器直接访问https://books-anzu.herokuapp.com/books/1，确认能返回正确的JSON数据；如果访问失败，就把脚本里的URL改成http协议。

3. 验证前端元素类名是否匹配 #

你需要确保HTML文件中的元素类名和jQuery脚本里的选择器完全一致。比如脚本里用.book-id，HTML里对应的元素必须有class="book-id"——如果类名拼写错误（比如写成bookId、book-id-1），数据就无法正确插入到页面中。

打开浏览器开发者工具（F12），切换到**控制台（Console）**标签，查看是否有报错：

• 如果出现No 'Access-Control-Allow-Origin' header is present on the requested resource，直接锁定是CORS问题；
• 如果出现404 Not Found，说明URL路径不正确；
• 如果没有报错但数据不显示，大概率是元素类名不匹配。

4. 添加AJAX错误处理，定位具体问题 #

你可以在jQuery的AJAX请求中加入错误处理逻辑，直观看到请求失败的原因：

$(document).ready(function() {
    $.ajax({
        url: "https://books-anzu.herokuapp.com/books/1",
        error: function(xhr, status, error) {
            console.log("请求失败状态：", status);
            console.log("错误信息：", error);
            console.log("响应状态码：", xhr.status);
        }
    }).then(function(data) {
        $('.book-id').append(data.id);
        $('.book-title').append(data.title);
        $('.book-author').append(data.author);
        $('.book-description').append(data.description);
        $('.book-publicationYear').append(data.publicationYear);
        $('.book-numberOfPages').append(data.numberOfPages);
    });
});

打开控制台就能看到具体的失败细节，帮你快速定位问题。

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