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.

Without looking into or knowing your backend code, may be worth looking at the HTTP headers as is possible these are not being passed through. May need to include something like ````Header add X-UA-Compatible "IE=7"```` — Peter Scott, Feb 22 '19 at 06:39
@PeterScott Hi Peter, this is just a fresh install of Strapi. I have not created any of my own code yet. — kojow7, Feb 22 '19 at 14:33
Am not familiar with Strapi but have seen similar issues with the http headers being stripped when using Apache Proxy - worth having a little sniff around .. eg https://stackoverflow.com/questions/26549250/apache-strips-down-authorization-header .. nb Strapi looks to use these headers for auth as per https://strapi.io/documentation/3.x.x/guides/authentication.html#providers — Peter Scott, Feb 22 '19 at 15:51

Y. Pablo Camacho · Answer 1 · 2019-03-01T03:09:27.137

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 <.

score 0 · Answer 2 · answered Feb 19 '20 at 17:18

You're probably running into issues because Strapi doesn't currently implement URL prefixes.

To get around this, you will probably want to use a subdomain or run Strapi on port 80 from the root directory with "/" instead of "/api". If you have other projects or apps on the same Apache server, you can use ProxyPassMatch to ignore those paths. For example:

ProxyPassMatch ^/otherproject !
ProxyPass "/" http://localhost:1337/
ProxyPassReverse "/" http://localhost:1337/

In this case the "/admin" route will also work without further modifications.

Alternatively, some people use Strapi middleware to apply prefixes to their routes (see example here).

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

2 Answers2