無法從節點 js 服務獲取數據到 angular js 2

Question

我正在學習 Angular，我正在嘗試借助 angular 2 中的服務從節點 js 服務中獲取數據。

當我從瀏覽器執行 node js 服務時，我能夠看到結果，但是當我嘗試以 angular 獲取數據時，它會引發錯誤。

在這里，我在 node js 和 angular 中創建了服務，我正在嘗試獲取數據，但它引發了錯誤。

節點js：

    var http = require("http");
    var express = require('express');
    var app = express();
    var sql = require('mssql');
    var data;
    var config = {
        server: 'INBGMW-C037',
        database: 'InvoiceReminders',
        user: 'sa',
        password: 'psi'
    };
    app.get('/serviceline_dtl', function (req, res) {
        // connect to your database
        sql.close();
        sql.connect(config, function (err) {
            if (err) console.log(err);
            // create Request object
            var request = new sql.Request();
            request.input('p_Flag', sql.VarChar, "ALL_SERVICE_LINE")
            request.output('po_Retval',sql.Int)
            request.output('po_UpdatedBy',sql.VarChar)
            request.output('po_UpdatedTime',sql.DateTime)
            request.output('po_Message',sql.VarChar)
            // query to the database and get the records
            request.execute("[dbo].[ARA_SP_DS_GetAllSLDetails]").then(function(recordSet) {
                if (recordSet == null || recordSet.length === 0)
                    return;
                // res.send(recordset);
                data=recordSet.recordsets;
                res.send(JSON.stringify(data));
                console.log(data);
                sql.close();
            })
                .catch(function (err) {
                console.log(err);
                sql.close();
            });
        });

    });
    var server = app.listen(5000, function () {
        console.log('Server is running..');
    });

角

    import { Injectable } from '@angular/core';

    import { Http, Response, Headers, RequestOptions } from '@angular/http';

    import { serviceLine } from './models/serviceLine';

    import {Observable} from 'rxjs/Rx';

    // Import RxJs required methods
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/catch';

    @Injectable()
    export class HttpService {
        private BASE_URL:string = 'http://localhost:5000/serviceline_dtl';
    constructor(
        private http: Http)
    {
    }

    public getServiceLinedtl(){
        return this.http.get(`${this.BASE_URL`)
            .map((res:Response) => res.json());
        //.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
    }

    }

組件：

    import {
        Component,OnInit ,OnChanges
    }
    from '@angular/core';
    import {
        IMyDpOptions
    }
    from 'mydatepicker';
    import {
        HttpService
    }
    from './http.service';
    @Component({
        selector: 'my-app',
        styleUrls:['/css/home.css'],
        templateUrl:'./SpotCheckStatus.html',
        providers:[HttpService]
    })
    export class SpotCheckStatusComponent  implements OnInit
    {
        constructor(
        private httpService: HttpService)
        {
        }

        ngOnInit(){
            this.httpService.getServiceLinedtl().subscribe(
                response=> {
                    console.log("VALUE RECEIVED: ",response);
                }
                ,
                error=> {
                    console.log("ERROR: ",error);
                }
                ,
                () => {
                    console.log("Completed");
                });
        }

    }

錯誤

Response headers : Headers {_headers: Map(0), _normalizedNames: Map(0)} ok : false status : 0 statusText : "" type : 3 url : null

_body : ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …} proto : Body

Answer 1

以防萬一其他人遇到這個問題：當您在不同的端口/域上運行前端和后端時（在這個問題中，我假設您使用的是 angular-cli，因此默認域是http://localhost :4200 ) 並且服務器在http://localhost:5000 中運行，您應該啟用 CORS 才能訪問服務器。 如果您使用 express（作為 OP），請檢查此鏈接以在您的節點服務器中啟用 cors： https ://enable-cors.org/server_expressjs.html

親切的問候。