Redirect to Wordpress site from client app giving CORS error
rohini kajaveParticipant# 1 year, 3 months ago
We have angular client application from which we are trying to redirect to WordPress’s page.
We have wordpress site as ‘https://acesheros.com’ and wordpress rest api authentication plugin is installed at miniorange.
We have configured ‘JWT Authentication’ to access ‘https://acesheros.com’ wordpress site with token endpoint as ‘https://acesheros.com/wp-json/api/v1/token’. We are able to get the ‘JWT token’ but while redirecting to ‘https://acesheros.com’ by passing token in header, its giving below error
Access to XMLHttpRequest at ‘https://acesheros.com/’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.
We also tried with passing below header but still no luck
‘Access-Control-Allow-Headers’: ‘Authorization, X-WP-Nonce, Content-Type, X-Requested-With’,
Is there any way/configuration to enable CORS at wordpress site or to whitelist domain?
Any help will be appreacited.
Thank you.manyaKeymaster# 2 months, 3 weeks ago
There are two ways to solve this issue. Either you need to make a server to server API call so that you won’t face the CORS issues, or you can use the miniOrange reverse proxy service which will help you to resolve the CORS issues.
Go to https://proxy.miniorange.com/ and login with miniOrange account.
1. Go to Proxy settings → Add new proxy.
2. Fill the required details, proxy link and your primary server address or REST API path.
3. Go to CORS settings and add domain http://localhost:4200 to whitelist that domain.
4. Click on the Save Configuration button.
You can use the proxy link instead of the direct communication of your WordPress website for API calling, and It will be secure as well as you won’t face the CORS issues on JS framework.
Let us know if you face any issue’s while configuration, we’d be happy to help you.
KalpeshKeymaster# 2 weeks, 3 days ago
- This reply was modified 2 months, 3 weeks ago by manya.
We have updated https://proxy.miniorange.com/ and it is working fine now.
For anyone else who is facing CORS issue with your frontend applications (React, Angular, VueJS), please try the steps below.
1. Go to https://proxy.miniorange.com/ and signup
2. Go to Proxy settings → Add new proxy.
3. Fill the required details, proxy link and your primary server address or REST API path.
4. Go to CORS settings and add domain http://localhost:4200 to whitelist that domain.
5. Save Configuration
You must be logged in to reply to this topic.