Using Apache as a proxy for backend JavaScript (Strapi) server

Question

I am trying to get a Strapi.io installation set up so that it works on an existing Apache site running on Port 80.

Details:

• The Strapi server is running on Port 1337.
• The Strapi server has both a front page at / and an admin panel /admin
• My Apache site is running at http://example.com on port 80

I have edited my apache configuration file and added the following lines:

ProxyPass /admin http://localhost:1337/admin
ProxyPassReverse /admin http://localhost:1337/admin

ProxyPass /api http://localhost:1337/
ProxyPassReverse /api http://localhost:1337/

Currently that works fine for the /api page, but not the admin page. On the Admin page I get the following console errors:

main.js:40 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at r (main.js:40) r @ main.js:40 Promise.then (async) u @ main.js:1 ./node_modules/strapi-helper-plugin/lib/src/app.js @ main.js:40 t @ main.js:1 (anonymous) @ main.js:1 (anonymous) @ main.js:1

main.js:45 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at t (main.js:45) t @ main.js:45 Promise.then (async) u @ main.js:1 ./node_modules/strapi-helper-plugin/lib/src/app.js @ main.js:45 a @ main.js:1 (anonymous) @ main.js:1 (anonymous) @

main.js:1 main.js:40 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at n (main.js:40)

If I refresh the page, some or all of the main.js show as admin.js. Not sure if it makes a difference:

main.js:40 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at r (main.js:40) r @ main.js:40 Promise.then (async) u @ main.js:1 ./node_modules/strapi-helper-plugin/lib/src/app.js @ main.js:40 t @ main.js:1 (anonymous) @ main.js:1 (anonymous) @ main.js:1

admin:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Promise.then (async) u @ main.js:1 ./node_modules/strapi-helper-plugin/lib/src/app.js @ main.js:40 t @ main.js:1 (anonymous) @ main.js:1 (anonymous) @ main.js:1

admin:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Why am I experiencing this problem. What do I have to do to get this working correctly with my Apache server?

To clarify:

This was a very simple two minute install. I have not started to add any content to the site yet. I'm just trying to get the admin panel to work through Apache.

Answer 1

Apache serves by default index.html in response to any request it gets.

Therefore, my first thoughts would be adding

DirectoryIndex disabled 

to .htaccess, since strapi.io API runs at / root folder and apache returns the default Apache .html file instead, which is overriding the API request.

What is happening there exactly?

1.- Your JavaScript App (strapi.io) asks for data.json at your API point and it gets the contents of an index.html.

2.- Since the contents of index.html are not JSON, and start with a <, it throws the error message. A JSON file cannot start with <.