Angular 6调用Express API遇Http错误，求助解决

这个问题的根源很明确：跨域资源共享（CORS）配置缺失。虽然你的Express和json-server返回的内容完全一致，但json-server默认自带了CORS处理逻辑，而你的Express服务没有配置相关响应头，导致浏览器的同源策略拦截了请求，才会出现status: 0的未知错误。

快速解决方案：使用cors中间件 #

这是最简洁通用的方式：

1. 首先安装cors包：

   npm install cors --save
   

2. 修改你的app.js代码，引入并启用CORS：

   var express = require('express');
   var cors = require('cors'); // 引入cors中间件
   var app = express();
   
   app.use(cors()); // 全局启用CORS，允许所有来源的跨域请求
   
   app.get('/', function (req, res) { res.send('Hello World!'); });
   app.route('/users').get((req, res) => {
     res.send( [
       { "id": "5b03d4dd1a193d0ab08b1af8", "username": "bwteksuper", "level": 3, "is_active": true, "created_date": "2018-05-22T08:29:17.200000Z" },
       { "id": "5b03d4f81a193d0ab08b1af9", "username": "jade", "level": 2, "is_active": true, "created_date": "2018-05-22T08:29:44.492000Z" }
     ] );
   });
   app.listen(3000, function () { console.log('Example app listening on port 3000!'); });
   

手动配置CORS响应头（无需第三方包） #

如果你不想额外安装依赖，也可以手动在路由中添加CORS响应头：

app.route('/users').get((req, res) => {
  // 设置允许跨域的响应头
  res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有来源，生产环境建议指定具体域名
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

  res.send( [
    { "id": "5b03d4dd1a193d0ab08b1af8", "username": "bwteksuper", "level": 3, "is_active": true, "created_date": "2018-05-22T08:29:17.200000Z" },
    { "id": "5b03d4f81a193d0ab08b1af9", "username": "jade", "level": 2, "is_active": true, "created_date": "2018-05-22T08:29:44.492000Z" }
  ] );
});

为什么会出现这个问题？ #

浏览器的同源策略要求请求的协议、域名、端口必须完全一致才允许正常交互。你的Angular项目通常运行在localhost:4200，而Express服务在localhost:3000，属于不同端口的跨域请求。json-server默认已经配置了Access-Control-Allow-Origin等响应头，允许跨域请求；而你的Express服务没有这些配置，所以浏览器拦截了响应，返回了status: 0的错误。

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