如何用AngularJS从URL请求JSON数据并在Express EJS中展示

嘿，我看了你尝试用AngularJS拉取外部JSON数据、在Express的EJS模板里展示的代码，这里帮你梳理下大概率遇到的坑和修正方案：

首先先把你的代码补全并格式化，方便排查问题：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myController', function($scope, $http) {
  $http.get('http://localhost/drupal3/menu')
    .then(function(response) {
      $scope.links = response.data;
    });
});
</script>
<div class="row body" ng-app="myAp...">

你可能遇到的核心问题&解决办法 #

1. 跨域请求被拦截（最常见的问题）

你的AngularJS代码直接请求http://localhost/drupal3/menu，如果你的Express服务器跑在另一个端口（比如3000），浏览器会触发CORS同源策略限制，直接阻止这个请求。

有两种靠谱的解决方式：

• 方案一：用Express做代理转发
  咱自己的后端帮前端转发请求，绕开跨域限制。先装依赖：

npm install http-proxy-middleware --save

然后在Express的app.js里加代理配置：

const { createProxyMiddleware } = require('http-proxy-middleware');
// 把前端对/api/menu的请求转发到Drupal的menu接口
app.use('/api/menu', createProxyMiddleware({
  target: 'http://localhost/drupal3',
  changeOrigin: true,
  pathRewrite: { '^/api/menu': '/menu' }
}));

之后AngularJS里的请求改成：

$http.get('/api/menu')

• 方案二：在Drupal端开启CORS
  如果你有权限修改Drupal的配置，直接允许你的Express服务器域名跨域访问。可以在Drupal的settings.php里添加CORS规则，或者安装Drupal的CORS模块来配置。

2. AngularJS指令拼写错误

你代码里的ng-app="myAp..."明显是截断了，必须和你定义的模块名myApp完全一致，否则AngularJS无法识别模块，数据自然渲染不出来。修正后应该是：

<div class="row body" ng-app="myApp" ng-controller="myController">

3. EJS模板里缺少数据渲染逻辑

你没展示EJS里怎么用$scope.links，这里给你补一个基础的循环渲染示例（假设你的JSON数据里每个项有title和url字段，根据实际结构调整）：

<div class="row body" ng-app="myApp" ng-controller="myController">
  <h3>菜单列表</h3>
  <ul>
    <li ng-repeat="link in links">
      <a href="{{link.url}}" target="_blank">{{link.title}}</a>
    </li>
  </ul>
</div>

4. 加个错误捕获方便调试

给$http.get加个catch块，能快速排查请求失败的原因：

$http.get('/api/menu')
  .then(function(response) {
    $scope.links = response.data;
    console.log('成功获取数据：', response.data); // 打印数据看结构
  })
  .catch(function(error) {
    console.error('请求出错啦：', error); // 看报错信息找问题
  });

调试小技巧 #

• 按F12打开浏览器开发者工具，在Network标签看请求的状态码（比如404、500或者CORS错误）；
• 在Console标签看AngularJS的报错信息，比如模块找不到、控制器未定义等。

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