Angular中使用$http GET无法加载服务器JSON文件问题求助

我来帮你搞定这个问题哈——本地加载JSON正常，换服务器URL就触发XML解析错误，明明浏览器直接访问能看到JSON内容，这情况我碰到过好几次，核心原因其实很明确：

问题根源分析 #

Angular的$http服务会根据服务器返回的Content-Type响应头来自动解析数据：

• 如果服务器返回application/json，它会直接把内容解析成JSON对象；
• 但要是服务器把.json文件当成普通文本（返回text/html或text/plain），$http就会错误地用XML解析器去处理JSON内容，自然就抛出XML解析错误了。

你可以自己验证一下：打开浏览器开发者工具的Network标签，重新加载页面找到dog.json的请求，查看Response Headers里的Content-Type字段，大概率不是application/json。

具体解决方案 #

方案1：修正服务器的Content-Type配置（推荐） #

让服务器正确识别.json文件并返回对应类型：

• Apache服务器：在项目根目录新建或修改.htaccess文件，添加：

  AddType application/json .json
  

• Nginx服务器：在站点配置的http或server块中添加：

  types {
      application/json json;
  }
  

修改后重启服务器，再测试请求应该就能正常解析了。

方案2：在Angular请求中强制指定响应类型 #

如果暂时改不了服务器配置，可以在$http请求里强制告诉Angular要解析成JSON：

app.controller('myCtrl', function($scope, $http) {
  $http({
    method: "GET",
    url: "http://localhost/week10/resources/dog.json",
    responseType: 'json' // 强制指定响应类型为JSON
  }).then(function mySuccess(response) {
    $scope.dogObj = response.data;
  }, function myError(response) {
    $scope.dogObj = response.statusText;
    // 加个日志方便排查更多细节
    console.log('请求错误详情:', response);
  });
});

额外提醒：图片路径适配 #

服务器环境下，图片的相对路径是基于当前页面URL的，要确保images/dog1.jpg在服务器上能访问。比如你的页面在http://localhost/week10/，那图片路径最好写成绝对路径/week10/images/dog1.jpg，避免出现404错误。

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