Angular4 找不到 Node.js 后台的数据（请求跨域的问题）

Question

情况描述：
1.整体就是一个Angular项目从Node.js后台读取数据的小例子；
2.Angular项目 与 Nodeserver文件夹在同一个硬盘的不同文件夹；
3.Angular项目端口4200,Node.js端口 8000，所以会有一个配置指向；
3.在浏览器里单独访问node.js的数据可以显示，angular访问就找不到了。

搜了一下，应该是请求跨域的问题。

答案：
启动服务的时候必须用npm run start启动，代理才生效，如果用ng serve启动代理不生效

Angular 项目 TS：

import { Component, OnInit } from '@angular/core';
import {Observable} from "rxjs";
import {Http} from "@angular/http";
import 'rxjs/Rx';
@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  dataSource: Observable<any>;
  products: Array<any> = [];
  constructor(private http: Http) {
    this.dataSource =this.http.get('/api/products').map((res) => res.json());
  }
  ngOnInit() {
    this.dataSource.subscribe(
      (data) => this.products =data
    );
  }
}

Angular package.json 配置：

"start": "ng serve --proxy-config proxy.conf.json",

Angular proxy.conf.json 配置：

{
  "/api":{
    "target":"http://localhost:8000"
  }
}

Node.js服务器端 auction_server.ts：

import * as express from 'express';

const app = express();

export class Product {
    constructor(
        public id: number,
        public title: string,
        public price: number,
        public rating: number,
        public desc: string,
        public categories: Array<string>)  {
    }
}
const products: Product[] = [
    new Product(1, '第一个商品', 1.99, 3.5, '这是第一个商品，是我在',['图书1']),
    new Product(2, '第二个商品', 1.99, 3.5, '这是第一个商品，是我在',['美食2']),
    new Product(3, '第三个商品', 1.99, 3.5, '这是第一个商品，是我在',['玩具3']),
    new Product(4, '第四个商品', 1.99, 3.5, '这是第一个商品，是我在',['设计4']),
    new Product(5, '第五个商品', 1.99, 3.5, '这是第一个商品，是我在',['旅游5']),
    new Product(6, '第六个商品', 1.99, 3.5, '这是第一个商品，是我在',['工作6'])
];
app.get('/',(req,res) => {
    res.send("Hello Express!!!");
});
app.get('/api/products',(req, res) => {
    res.json(products);
});
app.get('/api/product/:id',(req, res) => {
    res.json(products.find((product) => product.id == req.params.id));
});
const server = app.listen(8000,"localhost", () => {
    console.log("服务器已启动，地址是：http://localhost:8000");
});

单独通过浏览器访问正常显示：

Angular 找不到数据：

Answer 1

请求的时候加上8000端口号