2

I have successfully programmed a Joomla 4/5 API to generate an API web service. There is a kind of weird bug uploading files though, because it basically works on localhost - but on the live system I get the following error:

2023-11-07T20:10:12+00:00 CRITICAL 77.8.3.4 error Uncaught Throwable of type Joomla\CMS\Router\Exception\RouteNotFoundException thrown with message "Page not found". Stack trace: #0 [ROOT]/libraries/src/Application/SiteApplication.php(754): Joomla\CMS\Router\Router->parse() #1 [ROOT]/libraries/src/Application/SiteApplication.php(244): Joomla\CMS\Application\SiteApplication->route() #2 [ROOT]/libraries/src/Application/CMSApplication.php(306): Joomla\CMS\Application\SiteApplication->doExecute() #3 [ROOT]/includes/app.php(58): Joomla\CMS\Application\CMSApplication->execute() #4 [ROOT]/index.php(32): require_once('...') #5 {main}

It seems that Joomla cannot find the API endpoint, when called from JavaScript Node.js (Netlify). It does not reach the API controller. Joomla 4 does not log any error message. Joomla 5 at least prints the above message. -

The registerRoutes() of the Plugin looks like this:

 $routes = [ ... new Route( ['POST'], 'v1/....fileupload/:id', 'myclass.fileupload', ['id' => '(\d+)'] ) ...]

The defined Route can be successfully called on localhost or by using Postman (with "multipart/form-data") via this URL: https://myjoomlaapiserver.com/api/v1/...fileupload/1

On the JavaScript Side (Vue 3/ Nuxt 3) the code calling the endpoint generates a file Blob and sends it to the Joomla API.

const results = await $fetch( url, { method: "POST", body: newFormData, headers: { // "Content-Type": "multipart/form-data", 'Accept': '*/*', //! Ohne gibt's einen 406 Error Authorization: `Bearer ${config.BEARER}`, }, } );

More details on the Vue client here https://stackoverflow.com/questions/77232507/file-upload-through-pinia-store-and-the-nuxt-3-server-api

Any ideas why this works on localhost but not on Joomla 4 or Joomla 5? How to get better debugging info on the Joomla side?

Improve this question
11
  • What is the full endpoint URL? Is your live site installed in a subdirectory? Commented Nov 8, 2023 at 6:09
  • The Joomla API endpoint URL is on another Server. It works with Postman ("multipart/form-data"). Commented Nov 8, 2023 at 11:48
  • Added some code to the question above Commented Nov 8, 2023 at 14:58
  • Can you try changing URL so it includes index.php, e.g. https://myjoomlaapiserver.com/api/index.php/v1/...? Commented Nov 8, 2023 at 16:24
  • 1
    I'm almost certain server configuration needs to be updated to allow api/index.php handle SEF URLs. See Joomla documentation for Nginx docs.joomla.org/Nginx. For Apache, inspect the htaccess.txt that ships with Joomla (note it has an error which prevents API from working when J! is installed in a subdirectory). Commented Nov 9, 2023 at 18:19

1 Answer 1

Reset to default
1

After a lot of research I have finally found the cause of the error.

On the Joomla side, you need to set the CORS parameter Access-Control-Allow-Headers to Content-Type,X-Joomla-Token,Authorization,Accept in the Joomla main configuration!

The main cause of the problem is on the server side of the Nuxt 3 application: Netlify blocks file processing and redirection to Joomla, because it mainly a service to server static content. - The solution is to communicate the file upload from the Nuxt 3 / Vue 3 web app client/browser directly.

const url = `${config.public.fileServerUrl}/api/v1/fileuploadroute`; const results = await useFetch( url, { method: "POST", body: form_data, headers: { // 'Content-Type': 'multipart/form-data', // DISABLE 'Accept': '*/*', //! Ohne gibt's einen 406 Error Authorization: `Bearer ${config.public.fileBearerToken}`, }, } );

As the Joomla API token is exposed to the web application client, I generated an additional one just for file uploads. - Options to hide the API token from the client could be writing a Netlify function or using Vercel. I haven't tried both yet.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.