Redirect to Wordpress site from client app giving CORS error

  • rohini kajave
    Participant
    # 1 year, 3 months ago

    Hello,

    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’,
    ‘Access-Control-Allow-Origin’: ‘*’,
    ‘Access-Control-Allow-Methods’: ‘POST,GET,OPTIONS,PUT,DELETE’,
    ‘Access-Control-Allow-Credentials’: ‘true’

    Is there any way/configuration to enable CORS at wordpress site or to whitelist domain?

    Any help will be appreacited.

    Thank you.

    manya
    Keymaster
    # 2 months, 3 weeks ago

    Hi Rohini,

    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.

    Thanks
    Team miniOrange

    • This reply was modified 2 months, 3 weeks ago by  manya.
    Bryan Barrera
    Participant
    # 2 weeks, 5 days ago

    Hey Manya,

    Our team is running into the same CORS error.

    We implemented the proxy and whitelisted our localhost domain

    “https://localhost:3000”

    But we still get the CORS error.

    Any idea what could still be causing this issue?

    Kalpesh
    Keymaster
    # 2 weeks, 3 days ago

    Bryan,

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.