You could use an average vector of these two collisions. But mainly its done like finding the closest collision (the one that occurs first move object back and check for collision again until none found) however there are collision jitters made by that approach, to focus on the topic more deeply you want to search for swept sphere collision

Main problem is that you cache the bounding coordinates, then do the collision for the top/bottom; which may change the actual location.

Now you do checks for left/right, but do it with the OLD coordinates.

In my games, I have a DX, DY, and move it in one pixel steps in a loop until both DX and DY are zero or a direction is blocked. Handle collision when you'd actually run in a block, not afterwards.

DX, DY = delta x and y
while ( ( DX != 0 )
||      ( DY != 0 ) )
{
  if ( DX > 0 )
  {
    if ( CollisionOnTheRightSideWouldOccur() )
    {
      // handle collision
      DX = 0;
    }
    else
    {
      // move one pixel to the right
      ...
      // update delta      
      --DX;
    }
  }
  else if ( DX < 0 )
  {
    if ( CollisionOnTheLeftSideWouldOccur() )
    {
      // handle collision
      DX = 0;
    }
    else
    {
      // move one pixel to the left
      ... 
      // update delta
      ++DX;
    }
  }
  
  // same for DY
  ...
}

Hello,
This routine has saved my life:

    Detect_Collision: function(sprite, other) {
     var results = {
       left: false,
       top: false,
       right: false,
       bottom: false,
       center: false,
       left_corner: false,
       right_corner: false,
       x: 0,
       y: 0
     };
     var hmap_width = sprite.hit_map.right - sprite.hit_map.left + 1;
     var hmap_height = sprite.hit_map.bottom - sprite.hit_map.top + 1;
     var delta_x = Math.floor(hmap_width * (sprite.cdelta_x / 100));
     var delta_y = Math.floor(hmap_height * (sprite.cdelta_y / 100));
     // Create 12 collision points. The middle collision point is important.
     var t1 = { x: sprite.hit_map.left + delta_x, y: sprite.hit_map.top };
     var t2 = { x: sprite.hit_map.right - delta_x, y: sprite.hit_map.top };
     var tc = { x: sprite.hit_map.left + Math.floor(hmap_width / 2), y: sprite.hit_map.top };
     var l1 = { x: sprite.hit_map.left, y: sprite.hit_map.top + delta_y };
     var l2 = { x: sprite.hit_map.left, y: sprite.hit_map.bottom - delta_y };
     var lc = { x: sprite.hit_map.left, y: sprite.hit_map.top + Math.floor(hmap_height / 2) };
     var r1 = { x: sprite.hit_map.right, y: sprite.hit_map.top + delta_y };
     var r2 = { x: sprite.hit_map.right, y: sprite.hit_map.bottom - delta_y };
     var rc = { x: sprite.hit_map.right, y: sprite.hit_map.top + Math.floor(hmap_height / 2) };
     var b1 = { x: sprite.hit_map.left + delta_x, y: sprite.hit_map.bottom };
     var b2 = { x: sprite.hit_map.right - delta_x, y: sprite.hit_map.bottom };
     var bc = { x: sprite.hit_map.left + Math.floor(hmap_width / 2), y: sprite.hit_map.bottom };
     var bl = { x: sprite.hit_map.left, y: sprite.hit_map.bottom };
     var br = { x: sprite.hit_map.right, y: sprite.hit_map.bottom };
     // Determine which face was hit.
     if (self.Point_In_Box(t1, other.hit_map) || self.Point_In_Box(t2, other.hit_map) || self.Point_In_Box(tc, other.hit_map)) {
       results.top = true;
       results.center = self.Point_In_Box(tc, other.hit_map);
       results.y = other.y + Math.floor(other.height * other.size_y * other.scale);
     }
     if (self.Point_In_Box(l1, other.hit_map) || self.Point_In_Box(l2, other.hit_map) || self.Point_In_Box(lc, other.hit_map)) {
       results.left = true;
       results.center = self.Point_In_Box(lc, other.hit_map);
       results.x = other.x + Math.floor(other.width * other.size_x * other.scale);
     }
     if (self.Point_In_Box(r1, other.hit_map) || self.Point_In_Box(r2, other.hit_map) || self.Point_In_Box(rc, other.hit_map)) {
       results.right = true;
       results.center = self.Point_In_Box(rc, other.hit_map);
       results.x = other.x - Math.floor(sprite.width * sprite.size_x * sprite.scale);
     }
     if (self.Point_In_Box(b1, other.hit_map) || self.Point_In_Box(b2, other.hit_map) || self.Point_In_Box(bc, other.hit_map)) {
       results.bottom = true;
       results.center = self.Point_In_Box(bc, other.hit_map);
       results.y = other.y - Math.floor(sprite.height * sprite.size_y * sprite.scale);
       // Also detect bottom right and bottom left hit.
       results.left_corner = self.Point_In_Box(bl, other.hit_map);
       results.right_corner = self.Point_In_Box(br, other.hit_map);
     }
     return results;
   }