Angular中$http GET请求REST服务数据无法在组件模板展示

嗨，我来帮你理清楚这个问题——你遇到的核心是浏览器的同源策略导致的CORS跨域拦截：本地JSON文件和你的前端页面属于同源（同一域名/端口/协议），所以$http请求能正常拿到数据；但REST服务和前端不同源时，浏览器会触发CORS安全检查，只要服务端没返回Access-Control-Allow-Origin响应头，浏览器就会拦截响应，哪怕Network面板能看到数据，你的Angular代码也拿不到，模板自然没法渲染。至于JSONP出现404，大概率是因为你的REST服务根本不支持JSONP接口。

下面给你按优先级排序的解决方案：

1. 优先在REST服务端配置CORS（标准方案） #

这是最规范、长期有效的解决方式，支持所有HTTP请求方法（JSONP只支持GET），具体配置取决于你的后端技术栈：

• Node.js/Express：安装cors中间件后启用：

  const cors = require('cors');
  const express = require('express');
  const app = express();
  
  // 开发环境可以允许所有域名，生产环境建议指定你的前端域名
  app.use(cors({ origin: 'http://你的前端地址:端口' }));
  
  // 或者允许特定路径的跨域请求
  app.use('/api/data', cors());
  

• Java/Spring Boot：可以在Controller上加注解，或者全局配置：

  // 单个Controller配置
  @RestController
  @CrossOrigin(origins = "http://你的前端地址:端口")
  public class DataController {
      // ... 接口逻辑
  }
  
  // 全局配置
  @Configuration
  public class GlobalCorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("http://你的前端地址:端口")
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowedHeaders("*")
                  .allowCredentials(true);
      }
  }
  

• 其他后端语言（Python/Django、PHP、.NET等）都有对应的CORS配置方式，核心都是让服务端返回Access-Control-Allow-Origin头。

2. 开发环境用Angular代理绕过CORS（临时方案） #

如果暂时没法修改服务端配置，开发阶段可以用Angular内置的代理功能来规避跨域：

1. 在项目根目录创建proxy.conf.json文件：

   {
     "/api": {
       "target": "http://你的REST服务完整地址",
       "secure": false,
       "changeOrigin": true,
       "pathRewrite": { "^/api": "" }
     }
   }
   

   这里的/api是你前端请求的前缀，pathRewrite会帮你把前缀去掉，转发到真实的服务地址。
2. 修改angular.json中的serve配置，添加代理文件路径：

   "architect": {
     "serve": {
       "builder": "@angular-devkit/build-angular:dev-server",
       "options": {
         "browserTarget": "你的项目名:build",
         "proxyConfig": "proxy.conf.json"
       }
     }
   }
   

3. 重启Angular开发服务器，之后前端请求时用/api/xxx代替完整的REST地址，比如原来的http://rest-server.com/data改成/api/data，代理会自动帮你转发请求，绕过浏览器的跨域检查。

3. JSONP方案（仅当服务端支持时使用） #

你之前用JSONP出现404，是因为REST服务没有提供JSONP接口。JSONP的原理是通过<script>标签加载数据，要求服务端接收一个回调参数（通常是callback），并返回回调函数名(你的JSON数据)的格式。
如果服务端支持JSONP，Angular中的用法是：

app.controller('YourController', function($http) {
  var vm = this;
  $http.jsonp('http://rest-server.com/data?callback=JSON_CALLBACK')
    .then(function(response) {
      vm.data = response.data; // 把数据赋值给作用域变量
    })
    .catch(function(err) {
      console.error('JSONP请求失败:', err);
    });
});

注意必须带callback=JSON_CALLBACK参数，Angular会自动替换成对应的回调函数名。如果服务端用的是其他参数名（比如cb），要改成对应的参数，比如?cb=JSON_CALLBACK。

额外排查点 #

• 确认控制器里正确把请求到的数据赋值给了作用域变量（比如$scope.data或者控制器的this.data），并且模板里的绑定变量名和控制器一致，比如模板里用{{ vm.data }}或者ng-repeat="item in vm.data"。
• 可以在请求的catch回调里打印错误信息，确认是不是CORS问题导致的请求失败。

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