'Cors issues with JWT Authentication for WP REST API and local React project

I succesfully installed "JWT Authentication for WP REST API" and followed (and reviewed multiple times) the instructions for setup correctly.

My React app does authenticate via the /jwt-auth/v1/token-endpoint.

I get a token back and store this in my localStorage.

All of my API-calls get added an authorization header as follows from this point on: Authorization: Bearer mYCust0mToken

In the browser, this triggers preflight requests to the server (which is a remote one), that all fail. Basically logging in kills all of my API-requests.

I'm now getting 405's stating the following:

Access to fetch at 'https://mywebpage.com/wp-json/wp/v2/posts/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I run WP inside a subdir, so I have two .htaccess files, one in the root, one in the wp/-directory. I've tried putting the suggested .htaccess-changes of the descriptions in both files, on several positions of the file, but still no luck.

I've also tried setting Allow-Origin headers to "*", just for the sake of testing. I did that in both the .htaccess-files, but also in my PHP.

Anyone out there that got "JWT Authentication for WP REST API" up and running and willing to tell how?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source