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

girishsai22 commented 2 years ago

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

Enable CORS configuration settings in /docker/pythonpath_dev/superset_config_docker.py
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 commented 2 years ago

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 commented 2 years ago

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

sadeq-qafari commented 2 years ago

I have the same problem!

thuandc commented 1 year ago

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 commented 1 year ago

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

amjedsaleel commented 1 year ago

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 commented 1 year ago

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

rscarborough1996 commented 1 year ago

@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 commented 1 year ago

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 commented 11 months ago

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

kormpakis commented 8 months ago

@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 commented 8 months ago

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 :)

rusackas commented 3 months ago

Closing this issue since (a) it sounds largely solved, (b) the topic has wandered quite a bit, and (c) it's been over 4 months since it was touched.

Maybe @dpgaspar or @hughhhh or @michael-s-molina will want to look at that trailing slash issue in the API as a 5.0 cleanup effort.

apache / superset