nginx 无法加载资源:net::ERR_NAME_NOT_RESOLVED错误[重复]

ogq8wdun  于 2024-01-06  发布在  Nginx
关注(0)|答案(1)|浏览(262)

此问题在此处已有答案

"Unknown host" error calling containerized backend from frontend(1个答案)
26天前关闭。
我在写一个应用程序。我写.net作为后端,Angular作为前端。对接的时候,我把我的前端应用程序放在nginx里面。Dockerfile是这样的

  1. FROM node:20.10-alpine AS build
  2. WORKDIR /app
  3. COPY package*.json .
  4. RUN npm install
  5. RUN npx ngcc --properties es2023 browser module main --first-only --create-ivy-entry-points
  6. COPY . .
  7. RUN npm run build --prod
  8. FROM nginx:stable
  9. COPY --from=build /app/dist/librari-fy/ /usr/share/nginx/html
  10. COPY nginx.conf /etc/nginx/nginx.conf
  11. EXPOSE 80

字符串
nginx.conf如下:

  1. worker_processes 1;
  2. events {
  3. worker_connections 1024;
  4. }
  5. http {
  6. server {
  7. listen 80;
  8. server_name http://backend:80;
  9. root /usr/share/nginx/html/browser;
  10. index index.html index.htm;
  11. include /etc/nginx/mime.types;
  12. gzip on;
  13. gzip_http_version 1.1;
  14. gzip_disable "MSIE [1-6]\.";
  15. gzip_min_length 256;
  16. gzip_vary on;
  17. gzip_proxied expired no-cache no-store private auth;
  18. gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  19. gzip_comp_level 9;
  20. location / {
  21. try_files $uri $uri/ /index.html;
  22. add_header Access-Control-Allow-Origin *;
  23. add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
  24. }
  25. }
  26. }


Docker-compose文件:

  1. version: '3.8'
  2. services:
  3. postgres:
  4. image: postgres:16-alpine
  5. container_name: postgredatabase
  6. restart: always
  7. environment:
  8. POSTGRES_PASSWORD: UArA0CGd5y1g5sE7U0OH
  9. POSTGRES_USER: libraryadmin
  10. POSTGRES_DB: Library
  11. ports:
  12. - "5432:5432"
  13. volumes:
  14. - postgres_data:/var/lib/postgresql/data
  15. networks:
  16. - app_internal_network
  17. healthcheck:
  18. test: pg_isready
  19. interval: 10s
  20. timeout: 60s
  21. retries: 5
  22. start_period: 80s
  23. backend:
  24. image: sahinyakici/librarybackend:latest
  25. restart: always
  26. container_name: backend
  27. depends_on:
  28. postgres:
  29. condition: service_healthy
  30. networks:
  31. - app_internal_network
  32. ports:
  33. - "8080:80"
  34. frontend:
  35. container_name: librarify
  36. image: sahinyakici/librarify:latest
  37. restart: always
  38. depends_on:
  39. - backend
  40. networks:
  41. - app_internal_network
  42. ports:
  43. - 80:80
  44. expose:
  45. - 80
  46. volumes:
  47. postgres_data:
  48. networks:
  49. app_internal_network:
  50. driver: bridge


应用程序运行成功,但我在网站的控制台中得到以下错误:“Failed to load resource:net::ERR_NAME_NOT_RESOLVED”。如果我进入UI容器并尝试使用curl,我可以从后端获取数据。您认为是什么问题?
Error screenshotError2Error3
我试着从容器中使用 curl 。

w41d8nur

w41d8nur1#

前端代码在客户端执行,这意味着浏览器处理代码,而不是NGINX Web服务器。当您请求前端容器时,NGINX服务器返回您网站的HTML,CSS和JavaScript文件,这些文件由浏览器解释。
因此,您的浏览器,通过扩展您的计算机,将是请求后端API的人。因此,在前端中配置的后端URL应该是http://localhost:8080而不是http://backend
您的NGINX服务器应该只提供前端文件。将server_name修复为localhost,并将前端代码中的后端URL修复为http://localhost:8080

相关问题