node.js - 不接收具有跨源访问权限的数据

时间:2016-06-27 07:08:47

标签: node.js http cors

我有2台服务器,1台使用nodejs,另一台使用gulp-webserver。

node.js服务器使用users.json文件并显示它们。

var express     =   require("express");
var app         =   express();
var bodyParser  =   require("body-parser");
var router      =   express.Router();
var cors        = require('cors')
var fs          = require("fs");
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({"extended" : false}));

app.get('/listUsers', function (req, res) {
   fs.readFile( __dirname + "/" + "users.json", 'utf8', function (err, data) {
       console.log( data );
       res.end( data );
   });
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

user.json:

 {
   "user1" : {
      "name" : "mahesh",
      "password" : "password1",
      "profession" : "teacher",
      "id": 1
   },
   "user2" : {
      "name" : "suresh",
      "password" : "password2",
      "profession" : "librarian",
      "id": 2
   },
   "user3" : {
      "name" : "ramesh",
      "password" : "password3",
      "profession" : "clerk",
      "id": 3
   }
}

现在我想使用get方法调用该数据,并将其存储到变量中,然后使用primeng-datatable显示它。

因此我有一个data.service:

import { Injectable }    from '@angular/core';
import { Headers, Http } from '@angular/http';
import { Data } from './data';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class DataService {

    constructor(private http : Http) {

    }

    getData(){
    return this.http.get('http://localhost:8081/listUsers')
               .toPromise()
                    .then(res => <Data[]> res.json().data)
                    .then(data => { return data; });

               ;}
}

我在我的datacomponent中调用了这个onInit:

import { Component } from '@angular/core';
import { Data } from './data';
import {DataTable} from 'primeng/primeng';
import {Column} from 'primeng/primeng';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { DataService } from './data.service'

@Component({
    selector: 'my-datatbl',
    templateUrl: 'dist/data.component.html',
    directives: [DataTable, Column], 
    providers: [DataService]
})

export class DataComponent {
datatbl: Data[];
    constructor(private dataservice : DataService) {

    }




    ngOnInit(){


    this.dataservice.getData().then(datatbl => this.datatbl = datatbl)
    console.log(this.datatbl)

consolelog显示未定义。

我不知道哪个错了,但是因为我是一个绝对的新人,我的第一个问题是: 这甚至可能吗?

这仅用于测试目的,因为我正在进入REST apis。我不想在这个阶段使用mongodb或任何其他数据库服务,虽然我可以这样做,如果这是唯一的方法。

1 个答案:

答案 0 :(得分:0)

好的,我自己解决了。 问题是,我的响应是指我的users.json的.data属性,显然不存在。所以我只是将users.json改为

   {   "data": [
   {
      "name" : "mahesh",
      "password" : "password1",
      "profession" : "teacher",
      "id": 1
   },
  {
      "name" : "suresh",
      "password" : "password2",
      "profession" : "librarian",
      "id": 2
   },
    {
      "name" : "ramesh",
      "password" : "password3",
      "profession" : "clerk",
      "id": 3
   }
]
}

现在一切正常。