# CORS policy issue with loading Bokeh server app through Flask

**URL:** <https://discourse.bokeh.org/t/cors-policy-issue-with-loading-bokeh-server-app-through-flask/12029>\
**Category:** Community Support\
**Tags:** flask, cors\
**Created:** [October 11, 2024, 4:10pm UTC](https://discourse.bokeh.org/t/cors-policy-issue-with-loading-bokeh-server-app-through-flask/12029 "2024-10-11T16:10:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Patrick\_Wright](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/patrick_wright/32/1241_2.png) [@Patrick\_Wright](https://discourse.bokeh.org/u/Patrick_Wright)\
**Post date:** [October 11, 2024, 4:10pm UTC](https://discourse.bokeh.org/t/cors-policy-issue-with-loading-bokeh-server-app-through-flask/12029/1 "2024-10-11T16:10:35Z")

</div>

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:

```auto
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:

```auto
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:

```auto
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:

```auto
@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:

```auto
  <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!

---

<div class="post-metadata">

**Author:** ![Bryan](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/bryan/32/3625_2.png) [@Bryan](https://discourse.bokeh.org/u/Bryan)\
**Post date:** [October 11, 2024, 4:16pm UTC](https://discourse.bokeh.org/t/cors-policy-issue-with-loading-bokeh-server-app-through-flask/12029/2 "2024-10-11T16:16:29Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Patrick\_Wright](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/patrick_wright/32/1241_2.png) [@Patrick\_Wright](https://discourse.bokeh.org/u/Patrick_Wright)\
**Post date:** [October 18, 2024, 3:33pm UTC](https://discourse.bokeh.org/t/cors-policy-issue-with-loading-bokeh-server-app-through-flask/12029/3 "2024-10-18T15:33:07Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![system](https://discourse-uploads.bokeh.org/original/2X/1/14eb24f9e10e4e9b78e3f10f66c04ffa96446e5a.svg) [@system](https://discourse.bokeh.org/u/system)\
**Post date:** [January 16, 2025, 3:33pm UTC](https://discourse.bokeh.org/t/cors-policy-issue-with-loading-bokeh-server-app-through-flask/12029/4 "2025-01-16T15:33:41Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.