title: Send ajax request in front end JS from one container to another
body: <p>I'm using different Docker containers for API and front-end.</p>
  
  <pre><code>frontend:
    image: &lt;my_frontend_image&gt;
    ports:
     - "3000:3000"
  
  api:
    restart: always
    build: ./&lt;my_api_folder&gt;
    ports:
     - "9002:9002"
  </code></pre>
  
  <p>On API side I have the endpoint for sending emails:</p>
  
  <pre><code>/emails/custom
  </code></pre>
  
  <p>On frontend side I'm trying to send a request to this endpoint:</p>
  
  <pre><code>$.ajax({
    url: "http://api:9002/api/emails/custom",
    dataType: "json",
    type: "POST"
    ...
  </code></pre>
  
  <p>But it doesn't work. It looks like it sends a request to FrontEnd container again.</p>
  
  <p>What is wrong here?</p>
  
  <p>UPDATE:
  Maybe this issue is somehow related to my nginx configurations too:</p>
  
  <pre><code>location / {
      # Define the location of the proxy server to send the request to
      # Web it's a name of docker container with frontend.
      proxy_pass http://frontend:3000;
  
      # Redefine the header fields that NGINX sends to the upstream server
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  
      # Define the maximum file size on file uploads
      client_max_body_size 5M;
  }
  
  # Setup communication with API container.
  location /api {
      rewrite "^/api/(.*)$" /$1 break;
      proxy_pass http://api:9002;
      proxy_redirect     off;
      proxy_set_header   Host $host;
  }
  </code></pre>