Comments (24)
Hello,
Very sorry for the late reply, I'm using python flask and cross origin. Those are the header that I used:
@cross_origin(origins = 'https://webviz.io', methods = ['GET', 'HEAD', 'OPTIONS'], expose_headers = ['ETag', 'Content-Type', 'Accept-Ranges', 'Content-Length', 'Range'], allow_headers = ['*'], send_wildcard = True, vary_header = True)
from webviz.
Thanks for your help, I added those headers and it's working now!
from webviz.
@NicolasBernard456 Someone is asking about something similar in #410; do you happen to have a config file that you could share with us here?
from webviz.
Hi! I don't know much about MARV. Is it able to provide URLs that link to bags, e.g. like https://open-source-webviz-ui.s3.amazonaws.com/demo.bag? If so, then it might just be a matter of configuring their webserver to support CORS and HTTP Range Requests.
I'm trying their demo now, but can't seem to download bag files. E.g. if I click on the bag file link in https://ternaris.com/marv-robotics/demo/#/detail/sdcokcphyel4i52ggeemts33ly then Chrome shows me an "ERR_INVALID_RESPONSE" error. Any idea what might be going on? It would be cool to perhaps make a contribution to MARV to add an "open in Webviz" link.
from webviz.
If this appears to be too harsh to setup, is there a way to generate an url to have a view of one local bag instead of drag/dropping it?
Oh I forgot to answer this question. The browser does not have direct access to the file system (for security reasons), so we can't access arbitrary files through a URL. They have to be explicitly selected by the user, either by drag and drop or through a file selection dialog (which is very similar to drag and drop so we didn't bother implement that).
from webviz.
you could try to put https://min.io/ in front of your NAS as it acts as a S3 compatible storage layer.
from webviz.
Thank for your answers!
@janpaul123: MARV can provide URLs that link to bag, i've tried it locally it works fine :) I'm not sure why the demo is not working though... I'll try to configure the webserver as you said!
@stefan-enway: Thanks, i'll look into it if I struggle too much setting up the webserver :)
from webviz.
I managed to use flask_cors as MARV is implemented in python. I think I got the correct configuration, here is the response header using Postman :
But I still have this error on my console :
I also tried putting http://webviz.io as the origin or localhost:8080 as the origin(and building and running locally) but I'm getting the same result :(
Maybe I am missing something?
from webviz.
Looks like CORS headers are not set properly for OPTIONS requests (CORS preflight), try seeing what you get in postman if you make an OPTIONS request.
from webviz.
@NicolasBernard456
docker run -p 9000:9000 -v /mnt/data:/data minio/minio server /data
plus another for nginx with TLS proxy & all the CORS/proxy tuning.
I even automated the letencrypt part for "offical" certs ;)
from webviz.
@janpaul123
This is what I get :
from webviz.
@stefan-enway Got this error when using min.io
on console :
I tried drag and dropping that bag, it worked fine.. :/
from webviz.
please run curl -H "Access-Control-Request-Method: GET" -H "Origin: http://localhost" --head http://www.google.com
replace google with your URI.
and please just copy&paste the output in text (maybe with `` enclosing)
from webviz.
and get an nginx somewhere and look at https://enable-cors.org/server_nginx.html. beware that * is a wildcard for everywhere, but if you use it on a local VM/network you should be fine.
from webviz.
@janpaul123
This is what I get
Right so if in that case Access-Control-Allow-Origin
and Access-Control-Expose-Headers
are missing, then that is the issue!
from webviz.
@NicolasBernard456 any chance you could share your final solution? Would be cool to contribute this back to MARV, too! 😄
from webviz.
oh yeah. in nginx config please ;)
from webviz.
No worries, and great, thanks for sharing! Btw, I'm trying to get to know our users better, so if you'd be interested in a quick call some time soon feel free to shoot me an email at [email protected] :)
from webviz.
I am using nodejs ( express) for this issue and this file is running
`var express = require('express')
var cors = require('cors')
var app = express()
crossOption = {
"origin" : '',
"methods" : ['GET', 'HEAD', 'OPTIONS'],
"exposedHeaders" : ['ETag', 'Content-Type', 'Accept-Ranges', 'Content-Length', 'Range'],
"allowedHeaders" : [''],
}
app.use(cors(crossOption))
//Using direct file URL
app.get('/demo.bag',function(req,res){
res.download(__dirname +'/2021-01-11-18-26-43.bag');
})
app.listen(9999, function () {
console.log('CORS-enabled web server listening on port 80')
})`
It's working.
from webviz.
I also want to use marv as data managament platfrom for bag files and visulaize with webviz via remote url.
But i'm new with web server and don't know how to create URLs that link to bag, and config CORS with latest marv which has switched to use synchronous HTTP client/server framework aiohttp.
Could you share your marv code to me that I can try and study?
Many thanks.
from webviz.
leave a comment for people who is working on django:
I'm trying to use django and django-cors-headers to setup a file-hosting server for the remote bag accessing. The setup looks good and tested by curl request. However, in the developer console of browser, header Access-Control-Allow-Origin
is still missing.
After some searching, this answer mentions that
Django does not serve the media files through the middleware stack, so any attempts to inject headers are pointless.
so it means we cannot set up the https://xxx/*.bag
by django from which webviz loads remote bags.
And at last I setup a apache server instead, with these settings in .conf
file
Header always set Access-Control-Allow-Methods "GET, HEAD"
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Headers "*"
Header always set Access-Control-Expose-Headers "ETag, Content-Type, Content-Length, Accept-Ranges"
from webviz.
I am using nodejs ( express) for this issue and this file is running
`var express = require('express') var cors = require('cors') var app = express()
crossOption = { "origin" : '', "methods" : ['GET', 'HEAD', 'OPTIONS'], "exposedHeaders" : ['ETag', 'Content-Type', 'Accept-Ranges', 'Content-Length', 'Range'], "allowedHeaders" : [''], } app.use(cors(crossOption))
//Using direct file URL app.get('/demo.bag',function(req,res){ res.download(__dirname +'/2021-01-11-18-26-43.bag'); }) app.listen(9999, function () { console.log('CORS-enabled web server listening on port 80') })`
It's working.
Hi,
I used your code and it works, but when my bag size is very large, webviz will report an error : Requested more data than cache size: 265699599 > 209715200
I wonder if there is a solution?
from webviz.
I ran into this (self-hosting bags and having CORS issues) today and wanted a 1-line solution. In case anyone else is in the same boat, here's my approach for serving the bag files:
npx 'https://github.com/ben-z/http-server#8aa6a8f' --cors='ETag,Content-Type,Accept-Ranges,Content-Length'
Had to patch the http-server package to add support for the Access-Control-Expose-Headers
header.
from webviz.
We've also written up some documentation on setting up CORS correctly: https://foxglove.dev/docs/studio/connection/setting-up-cors
from webviz.
Related Issues (20)
- Delayed laserscans when clock times are out of sync HOT 1
- Bag not available HOT 2
- How large rosbag can webviz remote load?
- Consume React components directly HOT 3
- Errors when bootstraping the app HOT 1
- Error in fetching topics and datatypes HOT 1
- npm run bootstrap error
- Wrong visulization when coordinate values are large HOT 1
- Please update the invite HOT 1
- Pause button does not work HOT 2
- Why is the setting for transparency not working? HOT 1
- Can this this application be used as a part of custom application
- Can this application be used as a part of custom application? HOT 2
- Which node version should be used under Windows
- Information on the audio panal?
- Wrong Numeric Interpretation: how to fix? HOT 1
- ROS Demo.bag not available HOT 1
- /dist/vendor.js" Error (404): "Not found HOT 1
- root@ build-static-webviz: `lerna run build && rm -rf __static_webviz__ && cp -r docs/public/app __static_webviz__ && rm __static_webviz__/index.html && cp packages/webviz-core/public/index.html __static_webviz__/index.html && sed -i -- 's/\/dist\/webvizCoreBundle.js/webvizCoreBundle.js/' __static_webviz__/index.html && NODE_ENV=production STATIC_WEBVIZ=true webpack`
- Error: Minified React error #321
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webviz.