CORS error - No 'Access-Control-Allow-Origin' header is present on the requested resource

Hi,

My front end application is built using react and my backend is developed using symfony

app domain
my-app-cms.box

api domain
my-api-dev.box
login /api/login
callback /api/authorization-code/callback

  1. I am sending a login request from my front application to my API.

  2. The API contacts okta and redirects to the below url to get a authorization code

https://myorg.com/oauth2/v1/authorize?response_type=code&client_id=xxxxx&redirect_uri=https%3A%2F%2Fmy-api-dev.box%2Fapi%2Fauthorization-code%2Fcallback&scope=openid&state=xxxxx

  1. Then the call back end point in the API is hit (which in turn contacts okta) to generate a token.

This works fine when I hit the API directly in the browser.

However, when I try to login via the front end application I am getting the below error:

Access to fetch at ‘https://myorg.com/oauth2/v1/authorize?response_type=code&client_id=xxxxx&redirect_uri=https%3A%2F%2Fmy-api-dev.box%2Fapi%2Fauthorization-code%2Fcallback&scope=openid&state=xxxxx’ (redirected from ‘https://my-api-dev.box/api/login’) from origin ‘https://my-app-cms.box’ has been blocked by CORS policy: 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.

Please advise me on this issue.

Many thanks in advance.

You might check your Trusted Origins in API > Trusted Origins. Make sure that https://my-api-dev.box is listed as one of them.