I wanted to add a Looker component to my React app so I have just followed this link https://developers.looker.com/components/getting-started/
But the app does not work as expected and the console shows following
Access to fetch at 'https://xxxx.cloud.looker.com/api/4.0/queries/741/run/json_detail' from origin 'http://localhost:3000' has been blocked by CORS policy
I am sure http://localhost:3000 is added to the Embedded Domain Allowlist. Any hint for this error would be thankful.
I am not sure what the backend setup for this app is, but here are some repos that you can reference for Embed SDK apps that use React on the front-end:
https://github.com/bytecodeio/react-embed https://github.com/looker-open-source/LookerEmbedReference
In both of these apps, you will have to run the client app and the backend app locally. This also requires a .env file to be added both in the client directory and the api (backend) directory. These .env files will require API keys and your Looker instance's SDK embed secret. The backend .env would need these things:
LOOKERSDK_CLIENT_ID= LOOKERSDK_CLIENT_SECRET= LOOKERSDK_EMBED_HOST= LOOKERSDK_EMBED_SECRET=
If those are not in place correctly, that may be causing the CORS error when you run the app locally. I experienced a CORS error initially when I did not have the correct embed secret.
Down the road, once I had finished implementing the app on the front end, I experienced a CORS error from the api once it was deployed to App Engine. You can see in my repo that at this point in time, I had 2 api calls on the client side:
I had to reconfigure the api calls to be a route on the Express side in order to have the app working deployed:
https://github.com/bytecodeio/react-embed/blob/main/api/routes/api.js
Here was the React app with Looker's Embed SDK that was built. http://mini.bytecode.io/home I hope this helps!
