你提到请求https://jsonplaceholder.typicode.com/posts正常，但自己的http://media.astropublications.com.my/api/drebar_landing.json请求失败，大概率是跨域资源共享（CORS）或者混合内容限制这类浏览器安全机制导致的，下面给你一步步排查的方向：

1. 优先检查跨域（CORS）问题 #

当你的前端页面运行在一个域名（比如本地开发的localhost:4200），请求另一个域名的资源时，浏览器会触发CORS校验。如果目标服务器没有配置允许你当前域名的CORS响应头，浏览器就会直接拦截请求。

• 打开浏览器开发者工具（F12）切换到Network标签，重新发起请求，查看请求的响应状态：如果是403 Forbidden，或者控制台出现类似"No 'Access-Control-Allow-Origin' header is present on the requested resource"的错误提示，那就是CORS的问题。
• 解决思路：要么让后端在服务器响应头中添加Access-Control-Allow-Origin，允许你的前端域名访问；如果是本地测试阶段，也可以在Angular开发服务器中配置代理（修改angular.json里的proxyConfig），把请求转发到目标服务器，绕过浏览器的CORS限制。

2. 检查混合内容限制 #

如果你的前端页面是通过HTTPS协议加载的，但请求的JSON地址是HTTP的（比如你用的http://media.astropublications.com.my/...），现代浏览器会阻止这种混合内容请求——因为HTTP是不安全的协议，会被浏览器判定为风险请求。

• 你可以尝试把请求地址改成HTTPS协议：https://media.astropublications.com.my/api/drebar_landing.json，看看是否能正常请求。

3. 确认目标地址的有效性 #

先直接验证JSON地址本身是否可访问：

• 在浏览器地址栏输入http://media.astropublications.com.my/api/drebar_landing.json，看看是否能正常返回JSON内容。如果打不开，那可能是服务器端的问题（比如文件不存在、服务器宕机、路径拼写错误）。

4. 优化你的Angular代码 #

另外，你当前的代码用了Angular旧版本的success方法，现在官方推荐用then来处理Promise，同时添加错误捕获逻辑能帮你更快定位问题，建议改成这样：

var app = angular.module("viewJSON",[]); 
app.controller("viewCtrl", function($scope, $http) { 
  $http.get('http://media.astropublications.com.my/api/drebar_landing.json')
    .then(function(response) { 
      $scope.testJer = response.data; 
      $scope.keys = Object.keys($scope.testJer[0]); 
    })
    .catch(function(error) {
      // 打印错误详情到控制台，方便排查
      console.error('请求失败原因:', error);
    }); 
});

你可以按上面的步骤逐一排查，应该能快速找到问题所在~

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