javascript - 获取请求在 Angular 5 应用程序中抛出 404 错误

Question

我是 Angular 的新手。我正在创建一个演示视频播放器应用程序，跟随 youtube 系列，但令我震惊的是我无法为我的获取请求获取数据。我正在使用 Angular 5.2.10。以下是我的文件和代码:

• 服务器.js:

    const express = require('express');
    const bodyParser = require('body-parser');
    const path = require('path');
    const api = require('./server/routes/api');
    const port = 3000;
    const app = express();

    app.use(express.static(path.join(__dirname,'dist')));
    app.use(bodyParser.urlencoded({extended:true}));
    app.use(bodyParser.json());
    app.use('/api',api);

    app.get('*',(req,res)=>{
        res.sendFile(path.join(__dirname,'dist/index.html'));
    });

    app.listen(port,function(){
        console.log("server running on localhost"+port);
    });

• api.js:

        const express = require('express');
        const router = express.Router();
        const mongoose = require('mongoose');
        const Video = require('../models/video');
        const
    db="mongodb://usersubhash:subhashpwd@ds217350.mlab.com:17350/videoplayer";
        mongoose.Promise = global.Promise;
        mongoose.connect(db,function(err){
            if(err){
                console.log("Error!"+err);
            }
        });
        router.get('/videos',function(req,res){
            //res.send('api works');
            Video.find({}).exec(function(err,videos){
                if(err){
                    console.log("error retrieving videos");
                }else{
                    res.json(videos);
                }
            });
        });
        module.exports = router;

• video.js:

    const mongoose = require('mongoose');
    const Schema = mongoose.Schema;
    const videoSchema = new Schema({
        title:String,
        url:String,
        description:String
    });

    module.exports = mongoose.model('video',videoSchema,'videos');

• 视频.ts:

    export class Video {
        _id:string;
        title:string;
        url:string;
        description:string
    }

• 环境.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

• video.service.ts:(我有 getVideos() 方法)

    import { Injectable } from '@angular/core';
    import {Http,Response} from '@angular/http';
    import 'rxjs/add/operator/map';
    @Injectable()
    export class VideoService {

      constructor(private _http:Http) { }
      private _getUrl = `${environment.apiUrl}/api/videos`;
      getVideos(){
        return this._http.get(this._getUrl).map((response:Response)=> response.json());
      }
    }

• videoCenter.component.ts:(我订阅 getVideos() 方法的地方):

    import { Component, OnInit } from '@angular/core';
        import {Video} from '../video';
        import { VideoService } from '../video.service';
        @Component({
          selector: 'app-video-center',
          templateUrl: './video-center.component.html',
          styleUrls: ['./video-center.component.css'],
          providers:[VideoService]//,Http,HttpClientModule
        })
        export class VideoCenterComponent implements OnInit {
          myAllVideos:Array;//here I want to put my get Request Data
          constructor(private _videoService:VideoService) { }

          selectedVideo:Video;

          onSelectVideo (video:any){
            this.selectedVideo=video;
          }

          ngOnInit() {
            this._videoService.getVideos().subscribe(result => this.myAllVideos = result);
          }

        }

当我运行时

<code>node server.js</code>

在 VSCode 终端，然后在 POSTMAN 应用程序中，我可以通过在“localhost:3000/api/videos”中请求 GET 来获取所有记录。但是在我的应用程序中，我无法加载在 4200 端口上运行的数据。当我点击加载 video-center.component.ts 的按钮时，在 ngOnInit() 中触发了 getVideos() 但它抛出了这个错误:

Answer 1

显示错误的屏幕截图具有以下网址:

http://localhost:4200/api/videos

但是你的 server.js 说:

const port = 3000;

所以你的服务器在端口 3000 上运行，而不是 4200。端口 4200 通常是 Angular 运行的地方。

所以你需要修改你的getUrl:

private _getUrl = "http://localhost:3000/api/videos";

与其硬编码，我建议您阅读如何设置 environment文件，并将主机部分“http://localhost:3000”放入环境文件中并从那里读取。那么你的代码可能是:

private _getUrl = `${environment.apiUrl}/api/videos`;

注意

需要说明的是——尽管 Angular 在客户端上运行，但它是一个必须从某个地方启动的应用程序。例如，在生产环境中，您可能会这样:

https://app.mydomain.com <- 用户访问它，浏览器开始运行你的 Angular 应用程序

https://api.mydomain.com <- 你的 Angular 应用将从这里获取数据

在生产环境中，这两个 URL 很可能会在端口 80 上被访问。但由于子域不同(api 与 app)，这完全没问题。

但是，当以开发模式在本地运行时，您不能在同一地址 (localhost) 上使用同一端口运行两个不同的东西(即 Angular 应用程序和 Node 应用程序)。

由于您在本地主机上同时运行它们，因此它们必须具有不同的端口。所以当你写的时候:

return this._http.get(this._getUrl)...

它默认在 Angular 本身运行的地方，localhost:4200，而不是你的 api。你需要告诉 Angular 你的 api 在端口 3000 上。