Question

我正在使用express构建一个node.js应用程序，我正在公共文件夹中托管一个Angular SPA。

当我使用角度路由器在网站周围导航时，应用程序运行并且托管工作正常，但是当我直接尝试访问链接时，例如：http://192.168.1.4:3000/posts，网站的整个主体只是没有应用程序的JSON响应对象

这是处理get请求的Node.js代码

postRouter.route('/')
.options(cors.corsWithOptions, (req, res) => {
    res.sendStatus(200);

})
.get(cors.cors,  (req, res, next) => {
    posts.find({})
    .then((post) => {
        res.status(200);
        res.setHeader('Content-Type', 'application/json')
        res.send(post);
    }, (err) => next(err))
    .catch((err) => next(err));
})

这是我的角色服务发送获取请求

getPosts(): Observable<Post[]> {
    return this.http.get(baseURL + 'posts')
    .catch(error => { return this.processHttpService.handleError(error); });
}

发布组件.ts文件

  ngOnInit() {
    this.postService.getPosts()
      .subscribe(posts => { this.posts = posts, console.log(this.posts); },
        errmess => this.errMess = <any>errmess);
  }

同样，当我使用我在公共文件夹中托管的Angular 5客户端应用程序（使用ng build --prod构建）时，将从mongodb数据库中检索JSON对象，并在我的网站上正确显示，以及其余部分应用程序，标题，正文和页脚。

使用直接链接时，浏览器上不会显示ngOnInit（）上的console.log也可能值得注意。

非常感谢任何建议/解决方案

Answer 1

您在角度和快速应用之间存在路线冲突。 Angular在一条路线上提供（我猜测/路线），然后它“劫持”用户导航。它通过不实际更改网页来实现这一点，而只是更改导航栏中的URL，但实际上从未实际发出Web请求以获取该资源。

然后，您在Web服务器上获得了侦听这些端点的端点。这意味着当您访问/posts页面时，您不会要求角度做任何事情。事实上，角度甚至没有加载，因为它只会加载到/路径上。相反，你会直接进入你的API。

有很多方法可以解决这个问题，首先，许多人将其API公平地分开放置在子域上或挂载在/api上（例如/api/posts）。然后您的角度应用可以在/路线上提供。您可以使用其他技术，然后允许用户转到/posts并仍然加载角度应用。

您可以使用一些方法，例如hash location strategy，或者您可以从应用程序的任何路径（快递中的*）提供角度应用程序并加载角度应用程序然后接管。第二种方法是评论最多，通常会导致您在子域上托管api，然后在普通域名的*路由上提供角度应用。例如：api.myapp.com将仅提供JSON响应，但myapp.com上的任何路由都将提供角度应用，例如myapp.com/posts。

Node.js / Express.js + Angular router - 当使用直接链接时，服务器覆盖带有响应对象的客户端视图

1 个答案: