Localhost has been blocked by CORS policy - React / Panel served by a bokeh server

Panel
, ,
1

Hello,
I succeed to bypass CORS policy by proxying on my react component.

Based on this exemple:

Routing:
3000 → react app
3001 → Express.js (injection of script below)
5006 → Bokeh / Panel

Panel allow connection:
panel serve --allow-websocket-origin=localhost:3000

I inject directly via express.js

const express = require(‘express’);
const app = express();
const port = 3001;

app.get(‘/’, (req, res) => {
res.type(“.js”); // to respond as a js file
res.send(
`
let btn = document.createElement(“button”);
btn.innerHTML = “Click onit!”;
document.body.appendChild(btn);
btn.addEventListener(“click”, () => {

    var xhr = new XMLHttpRequest()
    xhr.responseType = 'blob';
    xhr.open('GET', "http://localhost:5006/simple/autoload.js?bokeh-autoload-element=ok&bokeh-app-path=/simple&bokeh-absolute-url=http://localhost:5006/simple", true);
    
    xhr.setRequestHeader("Bokeh-Session-Id", "test")
    
    xhr.onload = function (event) {
      var script = document.createElement('script'),
      src = URL.createObjectURL(event.target.response);
      script.src = src;
      document.body.appendChild(script);
    };
  xhr.send();
  });
    `
)

})

app.listen(port, () => console.log(Server running on ${port}));

React application looks like:

import React, { useRef, useEffect } from 'react';

import logo from './logo.svg';

import './App.css';

// https://dev.to/ma7eer/dynamically-appending-a-script-tag-in-a-react-app-1md3

function App() {

  const instance = useRef(null);

  useEffect(() => {

      const scriptTag = document.createElement('script');

      // give src attribute the link of express app (javascript server)

      scriptTag.src = "http://localhost:3001";

      // Create attribute ID

      var att = document.createAttribute("id");

      att.value = "ok";

      

      // Add this attribute to script

      scriptTag.setAttributeNode(att);

      // Append the script tag to our div instance

      instance.current.appendChild(scriptTag);

  }

  )

  return (

<>

<h1>My react App</h1>

    <div ref={instance} />

    </>

  );

}

export default App;

I think the express application can be done by Flask.

TBC