RESTful HTTP传输数据错误：Servlet返回JSON前端无法获取如何解决

1. 跨域资源共享(CORS)限制（概率最高） #

浏览器同源策略要求页面的协议、域名、端口与请求的接口完全一致，任意一项不匹配就会触发跨域拦截。浏览器地址栏直接访问接口不受同源策略限制，只有页面内通过AJAX/Fetch发起的请求才会被拦截，这也是你直接访问接口正常、前端拿不到数据的核心原因。

2. 响应配置缺失（概率较低） #

Servlet未显式指定字符编码，可能返回乱码导致JSON解析失败；jQuery ajax未指定返回数据类型时，低版本可能将JSON识别为普通字符串，无法直接通过对象属性取值。

第一步：配置Servlet支持跨域 #

在doGet方法中添加CORS响应头即可，修改后的Servlet代码如下：

@WebServlet("/add")
public class AddElementServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 配置跨域头，生产环境建议将*替换为前端实际部署的域名
        resp.setHeader("Access-Control-Allow-Origin", "*");
        resp.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
        resp.setHeader("Access-Control-Allow-Headers", "Content-Type");
        // 配置响应格式和编码，避免乱码
        resp.setContentType("application/json;charset=utf-8");
        resp.setCharacterEncoding("UTF-8");
        
        PrintWriter printWriter = resp.getWriter();
        printWriter.write("{\"id\":1,\"content\":\"Hello, World!\"}");
        printWriter.flush();
        printWriter.close();
    }
}

第二步：优化前端请求代码（可选） #

针对jQuery ajax写法，显式指定返回数据类型为JSON，避免解析异常：

$(document).ready(function() {
    $.ajax({
        url: 'http://localhost:8081/add',
        dataType: 'json'
    }).then(function(data) {
        alert('Data: '+ data + ' ' + data.id + ' ' + data.content);
        $('.greeting-id').append(data.id);
        $('.greeting-content').append(data.content);
    }).fail(function(xhr, error) {
        // 新增错误回调方便排查问题
        console.log('请求异常：', error, xhr.responseText);
    });
});

排查技巧 #

如果修改后仍有问题，打开浏览器开发者工具：

• 查看「控制台」面板是否有CORS、JSON解析相关报错
• 查看「网络」面板对应请求的状态码、响应内容，判断是请求拦截还是数据解析问题

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