我正在try 使用 docker 容器运行角形前端和Golang后端应用程序 它们已成功创建,但当前端try 对后端服务进行任何http调用时,都会失败

获取http://backend:8080/questions net::ERR_NAME_NOT_RESOLVED

通过判断,可以看出前端应用程序正在请求 请求URL: http://backend:8080/questions 推荐人政策: 交叉原点时严格原点

version: "3.8"
services:
  frontend:
    build: ./question-paper
    ports:
      - "4200:4200"

  backend:
    build: ./backend
    ports:
      - "8080:8080"
    environment:
      - DB_NAME=questions
      - DB_PORT=3306
      - DB_HOST=database
      - DB_PASSWD=root
      - DB_USER=root
    depends_on:
      - database

  database:
    image: mysql
    restart: always
    environment:
      MYSQL_DATABASE: questions
      MYSQL_PASSWORD: root
      MYSQL_ROOT_PASSWORD: root
    ports:
      - "3806:3306"
    volumes:
      - ./init.sql:/docker-entrypoint-initdb.d/  # Check the path to init.sql
      - my-db:/var/lib/mysql

volumes:
  my-db:

和我的Angular 代码

import { HttpClient } from '@angular/common/http';
import { Questions } from '../model/question-model';
import { Observable } from 'rxjs';
import { Inject, Injectable } from '@angular/core';


@Injectable({
  providedIn: 'root',
})
export class QuestionService {
  constructor(private httpClient: HttpClient) {}

  GetQuestions(): any {
    return this.httpClient.get('http://backend:8080/questions');
  }
}

后端代码

func main(){
    mux := mux.NewRouter()
    handle := h.CORS(
        h.AllowedOrigins([]string{"*"}),
        h.AllowedMethods([]string{"GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"}),
        h.AllowedHeaders([]string{"Content-Type", "Authorization", "Origin", "Accept"}),
    )
    mux.HandleFunc("/questions", handlers.GetQuestions)
    http.ListenAndServe(":8080", handle(mux))
}

error

有人能帮我解释一下请求失败的原因吗, 我可以考虑一些解决方案,比如在http url中使用后端服务的IP地址,我认为这不是一个好的 Select

推荐答案

您的客户端应用程序无法访问Docker内部域名(获取http://backend:8080),请阅读相关信息.

您可以使用像ngnix这样的反向代理,或者使用基于环境的方法管理URL,如下所示:

发展:环境.ts(ng serve):

export const environment = {
  apiUrl: 'http://localhost:8080'
};

制作:Environmental.prod.ts(ng build --prod):

export const environment = {
  apiUrl: 'http://myapi.com'
};

现在,你可以参考环境,而不是硬编码你的api url:

import { environment } from '../../environments/environment';

export class QuestionService {
  private baseUrl = environment.apiUrl; // Use apiUrl from environment

  getQuestions(): Observable<any> {
    return this.httpClient.get(`${this.baseUrl}/questions`);
  }
}

Angular相关问答推荐

HTTP Get请求未发送到提供的URL

angular 17:app.config. server.ts中的mergeApplicationconfig导致初始化在app.config. ts中导入的提供程序

声明Angular material 中按钮的自定义 colored颜色

Rxjs重置执行后的可观察延迟并重新调度Angular

列表和映射的SCSS语法

如何将参数传递给Angular 服务

找不到模块webpack dev服务器

NgRx Effects 抛出类型错误,我不知道发生了什么

如何在 Angular 中顺序执行回调

Angular:如何设置 PrimeNG p-steps 组件中已完成步骤的样式?

等待两个订阅完成而不嵌套

显示 1 个数据而不是所有 ngFor - Angular 11

Angular 2模板驱动表单访问组件中的ngForm

ng test 和 ng e2e 之间的真正区别是什么

如何在不刷新整页的情况下更新组件

如何在angular 5 中获取基本网址?

如何从组件模板将数组作为 Input() 传递?

Angular 2表单验证重复密码

如何在 Angular 中使用带有 SASS 的 Bootstrap 4

Angular2:将数组转换为 Observable