CORS policy issue with loading Bokeh server app through Flask

Community Support
,
1

Hello,
I am using Flask with Bokeh server, and my current code successfully loads various Bokeh server applications. I made a new app, retaining all the same Flask code, but I am now getting:

Access to XMLHttpRequest at 'http://localhost:5858/bkapp_jhmr_mapview/autoload.js?bokeh-autoload-element=b2a4aa6d-9c1e-4ed1-b4b3-fc42aa44bfca&bokeh-app-path=/bkapp_jhmr_mapview&bokeh-absolute-url=http://localhost:5858/bkapp_jhmr_mapview&resources=none' from origin 'http://127.0.0.1:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The only thing different about this Bokeh server app is that it is map-based, using xyzservices.providers. I am doing:

import xyzservices.providers as xyz

p = figure(x_range=(-12343000, -12336000), y_range=(5400500, 5405500),
           x_axis_type="mercator", y_axis_type="mercator",
           width=1800, height=1100,
           sizing_mode="scale_both"
           )

mapbox_outdoors_v12 = xyz.MapBox(
    id=cfg['mapbox_id'],
    accessToken=cfg['mapbox_access_token']
    )

p.add_tile(mapbox_outdoors_v12)

curdoc().add_root(p)

I have a suspicion the CORS issue might be related to cross-origin permissions to fetch the MapBox layer?

I am setting up my Flask app such as:

def create_app(test_config=None):
    # create and configure the app
    app = Flask(__name__, instance_relative_config=True)
    CORS(app,support_credentials=True,)
    app.config['CORS_HEADERS'] = 'Content-Type'

And then decorating the specific route with:

@bp.route('/foo/', methods=['GET'])
@cross_origin()

I then use the embedded_server_doc to render the template. In my base.html, I fetch Bokeh resources such as:

  <script src="https://cdn.pydata.org/bokeh/release/bokeh-3.6.0.min.js"></script>
  <script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-3.6.0.min.js"></script>
  <script src="https://cdn.pydata.org/bokeh/release/bokeh-tables-3.6.0.min.js"></script>

Everything works great if I do bokeh serve bkapp_jhmr_mapview, but when I try to deploy locally through Flask, it fails.

I am happy to provide additional details as needed, but any leads here would be very useful!

2

I am afraid I am not an expert when it comes to CORS issues. @Philipp_Rudiger @James_A_Bednar1 is this something you’ve had to deal with for Panel map apps?

3

I have resolved this issue. I’m not sure exactly how! Opening a new terminal session in my virtualenv seemed to resolve this, so it was likely an environment setting that needed to be updated. The bokeh app then successfully loaded without any CORS errors. Thanks anyway!

1 Like