CORS issues on some servers

[MarcSkovMadsen]

Hi

I wanted to explore ipyaladin in a Panel data app starting from this example https://github.com/cds-astro/ipyaladin/blob/master/examples/01_Getting_Started.ipynb.

Normally I can use AnyWidget components with Panel if I've installed the prerequisites:

pip install panel ipywidgets_bokeh ipyaladin

Then create a file called app.py.

import panel as pn
from ipyaladin import Aladin

pn.extension("ipywidgets")

aladin = Aladin(
    survey="http://alasky.cds.unistra.fr/DECaPS/DR1/color/",
    show_coo_grid=True,
    target="galactic center",
    coo_frame="galactic",
    fov=40,
    height=600,
)

pn.panel(aladin).servable()

and serve it by running the below in a terminal:

panel serve app.py

Finally open it. On a laptop it would be at at http://localhost:5006. But I'm working on a Jupyterhub so its served behind a reverse proxy at

https://SOME-DOMAIN/SOME-PATH/vscode/proxy/5006/

I'm not an expert here but I think that two things could be fixed here in ipyaladin or in aladin-lite?

• Requests to alasky.cds.unistra.fr should use https and not http protocol.
• You should add the appropriate headers to assets at alasky.cds.unistra.fra to allow them to be accessed from other domains.

I think these issues are not specifically related to Panel. Other users working in notebooks on JupyterHub/ Binder or trying to deploy data apps based on ipyaladin using for example Jupyter Voila server, Shiny Py or Solara would experience the same issues.

[MarcSkovMadsen]

If I change the survey argument to https then first issue goes away.

import panel as pn
from ipyaladin import Aladin

pn.extension("ipywidgets")

aladin = Aladin(
    survey="https://alasky.cds.unistra.fr/DECaPS/DR1/color/",
    show_coo_grid=True,
    target="galactic center",
    coo_frame="galactic",
    fov=40,
    height=600,
)

pn.panel(aladin).servable()

But CORS issue remains.

[MarcSkovMadsen]

That is what ChatGPT says is required to fix the issue:

The error message you're seeing is related to Cross-Origin Resource Sharing (CORS) policy. This is a security measure implemented by web browsers to prevent requests to different domains (cross-origin requests) unless the server specifies that it allows such requests.

In this case, the server at 'https://alasky.cds.unistra.fr/' is not sending the 'Access-Control-Allow-Origin' header in its response, which is why the browser is blocking the request.

To fix this issue, the server administrator for 'https://alasky.cds.unistra.fr/' needs to update the server's configuration to include the 'Access-Control-Allow-Origin' header in its responses. This header should be set to the origin of the request ('https://SOMe-DOMAIN/' in this case) or to '*' to allow requests from any origin.

If you don't have control over the server at 'https://alasky.cds.unistra.fr/', you might need to contact the server administrator or the service provider and ask them to make this change.

[MarcSkovMadsen]

Using alasky.u-strasbg.fr seems to work 👍

import panel as pn
from ipyaladin import Aladin

pn.extension("ipywidgets")

aladin = Aladin(
    target="159.2135528 -58.6241989",
    survey="https://alasky.u-strasbg.fr/Planets/Mars_Viking_MDIM21",
    fov=10,
    height=800,
)
pn.panel(aladin, sizing_mode="stretch_width").servable()

aladin-panel.mp4

Just a comment. For data app usage it would be really nice to be able to set the heigth and width of Aladin to "100%" instead an integer. That makes it much easier to make modern apps the responsively adjusts to the window size of the app.

[MarcSkovMadsen]

When I try to integrate example 05 I also get CORS error

05_linked_widgets:1 Access to fetch at 'https://irsa.ipac.caltech.edu/data/hips/CDS/DSS2/color/properties' from origin 'https://SOME-DOMAIN' 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.

[ManonMarchand]

Hi!

• So you got COARS issues with https://alasky.cds.unistra.fr/ and https://irsa.ipac.caltech.edu/ ? @tboch, @pferniqu, can we do something about this?

• for the width and height, that's something we can do, opening an issue to remind ourselves to do it 🙂

[tboch]

Hi all,

@MarcSkovMadsen : regarding the CORS issue message for the linked widgets example, I think it does not prevent ipyaladin from working. Actually, Aladin Lite will try to find the fastest mirror delivering the requested dataset. If a mirror is not available or not reachable (CORS issue for instance), it should fall back to another one, for instance alasky.cds.unistra.fr or alaskybis.cds.unistra.fr

@ManonMarchand : I think that in our examples, we should not set HiPS with URLs, but with their ID instead. If we want to give an example with a URL, it should be HTTPS.

[ManonMarchand]

Changed from url to ID in example 1 (in c3dc659)