CORS error when trying to embed the dashboard into a React application

[girishsai22]

I have followed the instructions in superset documentation to setup a local superset server using docker

In order to override configuration settings locally, I made a copy of ./docker/pythonpath_dev/superset_config_local.example into ./docker/pythonpath_dev/superset_config_docker.py (git ignored) and filled in my overrides.

These are my required overrides in superset_config_docker.py:

SUPERSET_FEATURE_EMBEDDED_SUPERSET=True
ENABLE_CORS=True
CORS_OPTIONS={
    'supports_credentials': True,
    'allow_headers': [
        'X-CSRFToken', 'Content-Type', 'Origin', 'X-Requested-With', 'Accept',
    ],
    'resources': [
         '/superset/csrf_token/' , # auth
         '/api/v1/formData/',  # sliceId => formData
         '/superset/explore_json/*',  # legacy query API, formData => queryData
         '/api/v1/query/',  # new query API, queryContext => queryData
         '/superset/fetch_datasource_metadata/'  # datasource metadata

    ],
    'origins': ['http://localhost:3001','http://localhost:3000'],
}

Frontend Code for embedding dashboard:

embedDashboard({
        id: "0b7b4ac0-de92-434b-a720-8486103c4905", // given by the Superset embedding UI
        supersetDomain: "http://localhost:8088",
        mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
        fetchGuestToken: () => fetchGuestTokenFromBackend(),
        dashboardUiConfig: { hideTitle: true }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
        })

<iframe src={embedDashboard}></iframe>

These new configuration settings aren't being picked up by superset/config.py and hence the CORS issue.

How to reproduce the bug

1. Enable CORS configuration settings in /docker/pythonpath_dev/superset_config_docker.py
2. The error still persists

Expected results

login is successful without any CORS error

Actual results

login is failing due to CORS error
Access to XMLHttpRequest at 'http://localhost:8088/api/v1/security/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Screenshots

Environment

(please complete the following information):

• browser type and version: Chrome on Windows , Version:102.0.5005.63
• superset version: 1.5.1
• python version: python --3.8.10
• node.js version: node -v10.19.0
• any feature flags active: No

Checklist

Make sure to follow these steps before submitting your issue - thank you!

• I have checked the superset logs for python stack traces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven't found one similar.

[MM-Lehmann]

I see a similar behavior when trying to download a dashboard as image, when external images are included. I was not able to workaround that by using CORS_OPTIONS.
1.5.1

[mayank-lalwani]

Facing same issue, is there a fix for this yet?

[sadeq-qafari]

I have the same problem!

[thuandc]

SUPERSET_FEATURE_EMBEDDED_SUPERSET=True
ENABLE_CORS=True
CORS_OPTIONS={
    'supports_credentials': True,
    'allow_headers': [
        'X-CSRFToken', 'Content-Type', 'Origin', 'X-Requested-With', 'Accept',
    ],
    'resources': [
         '/superset/csrf_token/' , # auth
         '/api/v1/formData/',  # sliceId => formData
         '/superset/explore_json/*',  # legacy query API, formData => queryData
         '/api/v1/query/',  # new query API, queryContext => queryData
         '/superset/fetch_datasource_metadata/,'  # datasource metadata
         '/api/v1/security/*' # add new line
    ],
    'origins': ['http://localhost:3001','http://localhost:3000'],
}

and origins add your url

but we have problem with api guest token

[marlomorales]

encountering same issue using the CDN package.
is there any chance someone here got to resolve this issue?

[amjedsaleel]

I have fixed cors issues while calling the API. I have cores options as flows

ENABLE_CORS = True CORS_OPTIONS = { 'supports_credentials': True, 'allow_headers': ['*'], 'resources':['*'], 'origins': ['http://localhost:4300'], }

[dakshinasd]

I followed @amjedsaleel 's approach and was able to get access_token. But having the same issue with guest_token

[rscarborough1996]

@dakshinasd Not sure if you are still having trouble with this, but I just had the same problem myself. My CORS settings allowed me to retrieve the access_token, but not the guest_token. In my case, the URL was incorrect. The API endpoint for guest_token ends with a forward slash "/", but the login endpoint does not. After adding the forward slash, it worked just fine.

[LeoDiep]

I got another problem, please help me take a look at this. Thank you a lot for your support

The config I set up in superset_config.py as:

ENABLE_CORS = True
CORS_OPTIONS = {
      'supports_credentials': True,
      'allow_headers': '*',
      "expose_headers": '*',
      'resources': '*',
      'origins': ['dashboard.aaa.com']
    }
SUPERSET_WEBSERVER_DOMAINS = ['dashboard.aaa.com','1.dashboard.aaa.com','2.dashboard.aaa.com','3.dashboard.aaa.com']
SESSION_COOKIE_DOMAIN = 'dashboard.aaa.com'

[purev0816]

I'm having the same problem. Were you able to resolve the above issue?

[kormpakis]

@dakshinasd Not sure if you are still having trouble with this, but I just had the same problem myself. My CORS settings allowed me to retrieve the access_token, but not the guest_token. In my case, the URL was incorrect. The API endpoint for guest_token ends with a forward slash "/", but the login endpoint does not. After adding the forward slash, it worked just fine.

Jesus Christ I have been trying to figure out what's wrong for quite a lot of hours.
Thanks man! :)

[rusackas]

CC @michael-s-molina @dpgaspar - I remember there was some discussion a while back about trailing slashes and their (potential) optionality... here's a problem case :)