I have a React app on my localhost. I’m trying to make a get request to my WordPress backend which is also hosted locally via DevKinsta. At this point, I am simply trying to establish that I can make a get request from my frontend to my backend. I am running into a CORS issue.
This is the error message I’m seeing in my console: Access to XMLHttpRequest at 'http://rob-test-3.local/wp-json/wp/v2/posts' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Hello @Damon and welcome to DevKinsta community!
One thing that I would definitely try is to add the header via Nginx. Open the .conf file of your site that is located in /DevKinsta/nginx_sites/ and before the last } sign add one of the following (depending on if you wish to add the header for a specific domain or for all):
Hey @Damon, can you please share a screenshot of the current error (just wanted to be sure that the CORS message hasn’t changed) and also a screenshot of what curl returns with this command:
If the header on that specific page is not there, it might be due to the status that it returns and you might need to add “always” to the Nginx line that has been added.
Here is the error message. I’ve included all the console messages that appear upon page load:
Here is the result when entering curl -IkL "http://rob-test-3.local/wp-json/wp/v2/posts". I can only upload one image apparently so I’ve had to copy paste:
That’s very odd, the header is definitely there , I see that Wordpress is adding a trailing slash, do you get the same error if you change your get request from
Thank you for your reply and update
Glad to see that you’re no longer getting the CORS error (after the “always” is added to the add_header line in your NGINX conf file, as suggested by my colleague @Alessandro above).
As I can understand the issue now is that you’re still not able to GET the posts from that local URL: http://rob-test-3.local/wp-json/wp/v2/posts/ (and it’s showing 500 Internal Server Error, as shown on your screenshot).
I’m still unsure if the 500 error in question is coming from the rob-test-3.local site or from the React app itself.
Do you see any recent 500 error message logged in the rob-test-3_error.log file perhaps, and it would tell more information/details in there? (the site’s error log file should be located inside the ~/DevKinsta/logs/ subfolder)
Regarding your question:
Any ideas why I can’t console.log my res?
Please note that we’re not web developers/programmers (I myself not so familiar and have no experiences with React scripts/codes ) and, so we can’t really tell exactly why you can’t do that console.log of your res / not working as expected - and this does not seem to be DevKinsta application related issue/scope.
Maybe you may want to please check this Handling Errors | Axios Docs (I can’t tell much though if that would help to solve the console.log error thing, but you can take a look and give it a try). If it’s still not working, we would suggest to consult/check with someone (programmer) that has more experiences with React apps.