2

I'm trying to develop a vuejs frontend site with wordpress as headless CMS.

so far everything is fine, but one thing worries me.

the frontend is served at domain.com/index.html so I renamed the wordpress root document index.php to _index.php. For reading the /wp-json/v2/ API I added

RewriteRule ^wp-json/(.*) /_index.php [L]

to the apache .htaccess file to redirect the call.

However, if I now also want to call the old json API with ?json=, the

RewriteRule ?json(*) /_index.php [L]

or

RewriteRule ^?json=(.*) /_index.php [L]

does not work.

how can I use both APIs, no idea why the rewriteRule doesn't work.

this is how mine looks

<IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
   RewriteBase /
   RewriteRule ^wp-json/(.*) /_index.php [L]
   #RewriteRule ^?json(*) /_index.php [L]
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]
</IfModule>

by the way: is there a way with the json API V2 to output the pages recursively as Parent/Child tree?

bluelemonade
  • 1,115
  • 1
  • 14
  • 26

1 Answers1

2

so I renamed the wordpress root document index.php to _index.php

Why? If you are having issues with index.php taking priority when requesting the root directory then reset the DirectoryIndex. For example:

DirectoryIndex index.html

Now, only index.html will be checked for when requesting a directory. (It was probably set to something like DirectoryIndex index.php index.html previously, so index.php would take priority.)

RewriteRule ^?json=(.*) /_index.php [L]

The RewriteRule pattern matches against the URL-path only, which notably excludes the query string. To match the query string you need to use a separate condition (RewriteCond directive) and check against the QUERY_STRING server variable.

For example:

RewriteCond %{QUERY_STRING} ^json=
RewriteRule ^$ index.php [L]

The regex ^$ ensures that only requests for the document root are matched and not any URL-path.

^json= matches any query string that starts json=. The (.*) part is not required. The QUERY_STRING server variable does not include the ? delimiter itself.

NB: The regex ?json(*) (in your first example) is not valid and you'd expect to get a 500 response (if on Apache), since the regex would fail to compile.

The / prefix on the substitution string is not required and should be avoided. (This now makes use of the RewriteBase directive - which isn't actually required here anyway.)

So, in summary, it would look like this, with a few minor tweaks:

# Limit the directory index to "index.html" only
DirectoryIndex index.html

RewriteEngine On

# Pass Authorization header to backend on CGI
RewriteRule ^ - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

# Stop early if the front-controllers are already reached
RewriteRule ^index\.(html|php)$ - [L]

# WordPress API
RewriteRule ^wp-json/ index.php [L]
RewriteCond %{QUERY_STRING} ^json=
RewriteRule ^$ index.php [L]

# VueJS
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
MrWhite
  • 43,179
  • 8
  • 60
  • 84
  • if I call the json api v2 in wordpress from a local website via fetch, it works without any problems. when I call the old json api via fetch I get an error unable to fetch (directly with the browser no problem) in the network debug tab I see provisional headers are shown Learn more application/json: application/json DNT: 1 Referrer: http://localhost:8080/ User-Agent: Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/87.0.4280.7 What could be the reason. – bluelemonade Dec 16 '22 at 13:18
  • "when I call the old json api via fetch" - What are the URLs/endpoints for these APIs? – MrWhite May 11 '23 at 10:08