AngularJS请求本地localhost服务器失败，无法获取接口数据求助

嘿，这个问题我之前踩过坑！你遇到的情况很典型，Postman能访问但前端不行，核心原因基本逃不开下面两个点：

1. 浏览器同源策略限制（跨域问题） #

浏览器有个叫同源策略的安全机制，当你的前端运行在localhost:3002，后端在localhost:3010时，端口不同就属于不同源，浏览器会阻止前端发起的跨域请求。而Postman是独立工具，不受这个策略限制，所以能正常拿到数据。

解决办法：在Express后端开启CORS支持 #

最简单的方式是用cors中间件：

• 先安装依赖：

  npm install cors --save
  

• 在你的Express项目里引入并使用：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  // 允许所有来源的请求（开发环境可以这么用，生产环境建议限制特定域名）
  app.use(cors());
  
  // 或者只允许你的前端域名访问（更安全）
  // app.use(cors({
  //   origin: 'http://localhost:3002'
  // }));
  
  // 你的API路由
  app.use('/api/books', yourBookRouter);
  

2. 请求路径指向错误 #

你写的$http.get('/api/books')是相对路径，它会默认指向前端服务器的地址（也就是localhost:3002/api/books），而不是后端的localhost:3010/api/books——这也是为什么测试JSONPlaceholder（绝对路径）没问题，本地就不行的原因。

解决办法有两种： #

• 直接使用绝对路径：把请求改成完整的后端地址

  $scope.getBooks = function(){ 
    $http.get('http://localhost:3010/api/books').then(function(resp){ 
      $scope.books = resp.data; // 注意这里应该取resp.data，而不是resp本身哦
    }); 
  }
  

  （顺便提一句：你原来的代码里把resp直接赋值给$scope.books，其实$http返回的resp对象包含data、status等属性，真正的接口数据在resp.data里，这点也要注意！）

• 配置Gulp代理转发：如果不想写死绝对路径，可以在Gulp的服务器配置里加代理，把前端的/api请求转发到后端的3010端口。比如用http-proxy-middleware：

  1. 安装依赖：

     npm install http-proxy-middleware --save-dev
     

  2. 在你的Gulp配置文件里添加代理规则（假设用的是gulp-connect）：

     const { createProxyMiddleware } = require('http-proxy-middleware');
     
     // 在gulp-connect的server配置里添加middleware
     gulp.task('serve', function() {
       connect.server({
         root: 'app',
         port: 3002,
         middleware: function(connect, opt) {
           return [
             createProxyMiddleware('/api', {
               target: 'http://localhost:3010',
               changeOrigin: true
             })
           ];
         }
       });
     });
     

  这样你原来的/api/books相对路径就能正确转发到后端了。

快速排查小技巧 #

打开浏览器的开发者工具（F12），切换到Network标签，触发getBooks函数，看看请求的URL是不是你预期的后端地址，以及有没有CORS相关的错误提示——这能快速帮你定位是跨域还是路径问题。

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