Embedding Apache Superset charts in React app

Question

I'm trying to embed a chart in superset to a React app . I'm running superset through Docker in windows in localhost 8088. When I'm running the react , its showing - Refused to display 'http://localhost:8088/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

How to fix this?

I added the following in config.py in Docker , but its still showing the error.

X_FRAME_OPTIONS = 'ALLOW-FROM http://localhost:3000'
ENABLE_CORS = True
CORS_ALLOW_ORIGIN = [
    'http://localhost:3000'
]

Answer 1

Potential Solutions

1. Set X-Frame-Options to ALLOWALL:

In your config.py, set X_FRAME_OPTIONS to 'ALLOWALL': python

X_F`RAME_OPTIONS = 'ALLOWALL'
This should allow your React app to embed Superset in an iframe.

2. Check the Docker Environment:

Make sure that you are restarting your Superset Docker container after making changes to the configuration. You can stop and restart the Docker container to apply the new settings:

bash
Copy code
docker-compose down
docker-compose up -d

3. Browser Cache: Clear your browser cache or try opening the React app in an incognito/private browsing window to ensure that the browser is not using a cached version of the Superset iframe.

4. Inspect Network Requests:

Use your browser's developer tools to inspect the network requests. Check if the X-Frame-Options header is still set to 'sameorigin'. If not, the changes in the Superset configuration are likely taking effect.

5. Check Other Headers:

Ensure that there are no conflicting headers being set elsewhere in your Superset setup, for example in a reverse proxy.

After making these changes, try embedding Superset in your React app again. If the issue persists, there might be an external factor influencing the headers, and you may need to inspect your Docker setup or any other components in the environment that could be affecting the headers.