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

0 0 angular4
攻城狮
攻城狮

声望值:44 0人

2019-02-13 14:49:59 提问

关注 0关注

收藏 0收藏, 57浏览

情况描述:
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;
  products: Array = [];
  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)  {
    }
}
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 找不到数据:
找不到数据报错

请先 登录 后评论

1个回答

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问