Add CORS headers in preview mode

[lfkpoa]

trafficstars

Hello,

We use Observable with API calls to a few different servers. The users connect with their own ID to these servers to get the data if they are authorized. But I can't use Observable Framework preview server while developing because of CORS. When I create react apps with create-react-app, their preview server (npm start) adds CORS headers automatically and I can test the app:

access-control-allow-headers: *
access-control-allow-methods: *
access-control-allow-origin: *

So, I'm suggesting to add these CORS headers automatically to the preview server as well or, at least, add a config that enables this feature.

Thank you.

[codingedgar]

Would be great to have something like https://vitejs.dev/config/server-options.html#server-proxy

[mbostock]

@lfkpoa Interesting! Are you using Framework’s preview server in production rather than just for development preview? I would love to hear more about how your setup so I can better understand this use case. 🙏

[lfkpoa]

Hi @mbostock

We try to use the preview server while developing and testing only. We need to connect to our API server to get the data, but we face CORS restriction. The use of the preview server makes it a lot easier to develop and test new ideias very fast. We managed to make a local fork of the framework to only add the required cors headers to preview server and it worked. In production we deploy to a web server configured to allow CORS to our API server. We connect to the API server to always get fresh data and because the user usually selects to interact with a small portion (related to a few clients) from huge tables. In the browser we use mostly Arquero but also DuckDB to manipulate the data. Thank you

[kzmKZuzmo]

hi the same here I try observable framework and I need to some modification to call some oxternal api and I always get this Access to XMLHttpRequest at 'https://test.test' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and I use this "dev": "tsx watch --ignore docs --no-warnings=ExperimentalWarning ./src/bin/observable.ts preview --no-open"

to run my observable

[mbostock]

@kzmKZuzmo That sounds unrelated to this issue and like you should move your request to the oexternal API into a data loader. Alternatively you need to enable CORS to your test.test server, not to the Framework preview server.

[kzmKZuzmo]

@mbostock so maybe you can help me What I need is write directly data into duckdb wasm without storing on the server only inside client is that possible ?

[mbostock]

@kzmKZuzmo Please open a new discussion if you’d like to ask for help on another topic.