Docker Angular Nginx can't connect to other service (netcore 8)

Discussão em 'Angular' iniciado por Gleb B, Dezembro 16, 2024.

  1. Gleb B

    Gleb B Guest

    Angular 17. When running services with docker-compose can't connect from nginx to other service (actually gateway with port 5000). After main page loads it starts to fetch data from gateway and I get an error for all requests. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/api/settings/background. (Reason: CORS request did not succeed). Status code: (null)

    Now I set Netcore8 services AllowAnyOrigins to true. Use Docker default network - bridge - all services run inside that network - checked. In NetCore containers use servers names setup in docker (not ip's) Swagger for NetCore runs. Dockerfile for Front is as follows:

    #STAGE 1
    FROM node:18-alpine AS build
    EXPOSE 4200
    WORKDIR /usr/src/app
    COPY package*.json ./
    RUN npm install
    RUN npm ci
    COPY . .
    RUN npm run ng -- build --configuration production
    #STAGE 2
    FROM nginx:alpine
    EXPOSE 80
    COPY nginx.conf /etc/nginx/nginx.conf
    COPY --from=build /usr/src/app/dist/EZui /usr/share/nginx/html
    CMD ["nginx", "-g", "daemon off;"]


    nginx.conf is

    user nginx;
    worker_processes auto;
    error_log /var/log/nginx/error.log notice;
    pid /run/nginx.pid;
    events {
    worker_connections 1024;
    }
    http {
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    '$status $body_bytes_sent "$http_referer" '
    '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;
    include /etc/nginx/mime.types;
    server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    default_type application/octet-stream;
    gzip on;
    gzip_comp_level 9;
    gzip_vary on;
    gzip_min_length 256;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers 16 8k;
    gunzip on;
    client_max_body_size 256M;
    location /api {
    proxy_pass http://localhost:5000/;
    #proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
    #proxy_buffering off;
    #proxy_set_header Accept-Encoding "";
    }
    location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
    }
    }
    sendfile on;
    #tcp_nopush on;
    keepalive_timeout 65;
    include /etc/nginx/conf.d/*.conf;
    }


    In angular I use environment.production

    api = 'http://localhost:5000/api';


    I tried to change localhost to names that are set for docker on front and back (for instance to gateway- that's the name of gateway Netcore service.

    Tried to play with nginx.conf - added even location / settings:

    if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    #
    # Custom headers and headers various browsers *should* be OK with but aren't
    #
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    #
    # Tell client that this pre-flight info is valid for 20 days
    #
    #add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
    }
    if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
    }
    if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
    }


    also tried to add reverse_proxy to nginx.conf.

    Still get the same error. Read a lot of issues and tried different fixes (many of them failed to run nginx) most of them in nginx.conf - nothing helped.

    Continue reading...

Compartilhe esta Página