时间戳

首页 > 解决方案 > 在云实例上 Dockerizing 平均堆栈应用程序并在浏览器上访问它

node.js - 在云实例上 Dockerizing 平均堆栈应用程序并在浏览器上访问它

问题描述

我已经在 EC2 实例上 Dockerized 一个 MEAN 应用程序，并尝试在浏览器上访问应用程序（前端）。在这个 docker-compose.yml 的帮助下，我已经链接了三个服务，即 FrontEnd、BackEnd 和 Database

version: "2"
services:
  angular:
    build: ./FrontEndYb
    ports:
      - "8085:4200"
    links:
      - app
  app:
    container_name: app
    restart: always
    build: ./BackEndYb
    ports:
      - "3011:3011"
    links:
      - mongo
  mongo:
    container_name: mongo
    image: mongo
    volumes:
      - ./data:/data/db
    ports:
      - "27017:27017"

我可以在 Postman 的帮助下调用我的节点 api 即 "VM-IP":3011/api/users 将数据存储到 mongo 容器中。我在我的前端代码中调用后端 api，如下 FrontEndYb/src/app/form.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class FormService {
    constructor(private httpClient: HttpClient) {
    }
saveInfo(firstname: string, lastname: string) {
        const headers = new HttpHeaders()
            .set('Authorization', 'my-auth-token')
            .set('Content-Type', 'application/json');
           this.httpClient.post('http://app:3011/api/users', {
          //here 'app' is  the name of node service written in docker-compose
            firstname: firstname,
            lastname: lastname
        }, { headers: headers }
).subscribe((response) => {
            console.log(response)
        });
    }
}

另外，我的 BackEnd/startup/routes.js

const express = require('express');
const users = require('../routes/users')

module.exports = function (app) {
    app.use(express.json())
    app.all("/*", function(req, res, next){
       res.header('Access-Control-Allow-Origin', '*');
       res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
       res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
    next();        
});
    app.use('/api/users', users);
}

问题是，当我在浏览器上访问应用程序并从那里发送一些数据时，会出现此错误

“”“从源“ http://54.169.178.148:8085 ”访问“ http://app:3011/api/users ”处的 XMLHttpRequest已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：预检请求不允许重定向。

core.js:7187 错误 HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: " http://app:3011/api/users ", ok: false, ...} error: ProgressEvent {isTrusted ：true，lengthComputable：false，加载：0，总数：0，类型：“错误”，...} 标头：HttpHeaders {normalizedNames：Map(0)，lazyUpdate：null，标头：Map(0)} 消息：“Http 失败http://app:3011/api/users的响应：0 未知错误”名称：“HttpErrorResponse”ok：false 状态：0 statusText：“未知错误”url：“ http://app:3011/api/users ” 原型：HttpResponseBase"""

在上面的错误中 54.169.178.148 is my VM public IP

如果我进入 FrontEnd 容器并调用节点容器 api 即http://app:3011/api/users，其中 'app' 是用 docker-compose.yml 编写的节点服务的名称，它可以正常工作。我知道如果我使用我的虚拟机的公共 IP 即this.http.post (' http:// /VM-Public-IP/api/users ',...) 在我的前端代码中，它工作正常，没有 CORS 问题，状态 200。

当我在浏览器中访问我的应用程序时，url 'app:3011/api/users' 不存在，因为它现在在外部世界（VM 之外），那么在这种情况下调用节点 api 的最佳做法是什么。

这是 github url，如果需要，可以参考完整代码 github.com/tarunchawla28/mean-docker

提前致谢。

标签： node.jsangulardockerdocker-composemean-stack

解决方案

最好的方法是让 API 网关或域名指向你 vm 的公共 ip。

推荐阅读