Media Manager does not show file explorer in Administrator Menu

General
1

When we try to access the media manager in our joomla site (joomla 4.4.5) we get a blank file explorer and get this error in the console.

Access to XMLHttpRequest at 'https://www.example.com/administrator/index.php?option=com_media&format=json&mediatypes=0,1,2,3&task=api.files&path=local-images%3A%2F' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

To remedy this, we found a solution with which we had to update the headers of the index page. header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');

header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

header("HTTP/1.1 200 OK ");

However, we are still getting the same error.

2
  • Cross-Origin Resource Sharing (CORS) is a security mechanism that restricts web pages from making requests to a different domain than the one that served the webpage.
  • In your case, JavaScript code on the frontend (https://example.com) is trying to access the media manager API on the backend (https://www.example.com/administrator). Since these are different origins, CORS prevents the request by default.

Troubleshooting Steps:

  1. Verify CORS Configuration (index.php):
  • Double-check that the CORS headers in index.php are set correctly:
    PHP
header('Access-Control-Allow-Origin: *'); // Allow all origins (for now, adjust later)
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');    1.  github.com github.com
header("HTTP/1.1 200 OK ");
    • Make sure these headers are sent before any content output. Consider using Joomla’s header manipulation plugins like “System - HTTP Headers” for easier management.Warning: Setting Access-Control-Allow-Origin: * allows any origin to access your API. This is for testing only. In production, restrict allowed origins to trusted sources (e.g., https://example.com).
  2. Check for Conflicting Extensions or Server-Side Rules:
  • Disable non-essential Joomla extensions to see if one is interfering with CORS configuration. Re-enable extensions one by one to identify the culprit.
  • If you have server-side rules (e.g., Apache mod_security or NGINX configurations), ensure they’re not overriding CORS headers.
  1. Verify Pre-flight Request:
  • Open your browser’s developer tools (Network tab) and try accessing the media manager. Look for a pre-flight request (usually an OPTIONS request).
  • If the pre-flight request fails with a status code other than 200 OK, investigate the specific reason for the failure. The browser console might provide more details.
  1. Joomla Settings and Permissions:
  • Check your Joomla configuration for any settings related to CORS or API access.
  • Verify user permissions, especially for the user accessing the media manager. Make sure they have appropriate access for the API requests.

Additional Tips:

  • Consider using a browser extension like “Allow CORS: Access-Control-Allow-Origin” for testing purposes. However, avoid using it in production as it bypasses security restrictions.
  • If you’re using a CDN, ensure it’s not interfering with CORS headers.

Advanced Troubleshooting:

  • If the above steps don’t resolve the issue, consider using a Joomla extension specifically designed for managing CORS configuration, such as “CORS Anywhere” or similar extensions.

By following these steps and carefully considering the potential causes, you should be able to identify and address the CORS error in your Joomla media manager.