wojtkowiak / meteor-desktop

Build a Meteor's desktop client with hot code push.
MIT License
448 stars 84 forks source link

Failed to load meteor://meteor:80/socket.io/EOI=..... CORS is not supported for the custom "meteor" protocol #185

Open lunafi-evan opened 6 years ago

lunafi-evan commented 6 years ago

Hot reload doesn't work for me and I'm seeing lots of the following error in the console which I think might be related

image

I see that you registered a new "meteor:" protocol in this commit. Can you provide some insight into why this was chosen, and do you know if I have something configured incorrectly?

Project config Meteor 1.6.1.3 meteor-desktop 1.3.0 Linux Mint 18.1

My two scripts to run the server and client are as follows in package.json:

 "start:desktop-server": " meteor run --mobile-server=127.0.0.1:3000 --settings config/config.development.json --raw-logs  | ./node_modules/.bin/bunyan -o short",
 "start:desktop-client": "meteor-desktop",
wojtkowiak commented 6 years ago

Was it working for you before in previous MD versions? If yes then in which? How are you starting desktop client, with what arguments? The protocol should not be related to this problem unless you are yourself using a meteor:// protocol intentionally.

ellery-lunafi commented 6 years ago

Hi @wojtkowiak This was initial project set up for us so not sure if it was working with earlier versions. I can try rolling back to a previous version if you think that would help. Do you have a recommended version we should try?

Here is how we are starting project we have the following scripts in our package.json:

 "start:desktop-server": " meteor run --mobile-server=127.0.0.1:3000 --settings config/config.development.json --raw-logs  | ./node_modules/.bin/bunyan -o short",
 "start:desktop-client": "meteor-desktop",

We are not using that protocol our selves either. Seems like it is coming from here as @lunafi-evan mentioned

wojtkowiak commented 6 years ago

Hmm really weird because I have honestly no idea how the meteor:80 could get into the ddp url in your case. It needs to come from somewhere and afaik there are only 3 ways of intentionally setting it:

  1. meteor --mobile-server=meteor:80
  2. settings MOBILE_DDP_URL to meteor:80
  3. running npm run desktop -- meteor:80 But if none of the above is your case then its definitely something we need to nail down.

Please post your log from running meteor-desktop (with MD_LOG_LEVEL set to ALL and METEOR_DESKTOP_DEBUG set to 1)

ellery-lunafi commented 6 years ago

Hi @wojtkowiak

Here is output. I first run APP_NAME=coygo-webapp meteor run --mobile-server=127.0.0.1:3000 --settings config/config.development.json To get server side running.

Then I ran MD_LOG_LEVEL=ALL && METEOR_DESKTOP_DEBUG=1 && meteor-desktop

I then saw the following log out put

> lunafi-webapp@0.9.1 start:desktop-client /home/ellery/dev/lunafi/webapp
> meteor-desktop

METEOR-DESKTOP v1.3.0

REMINDER: your Meteor project should be running now on port 3000

INFO  index:  initializing
INFO  electronApp:  scaffolding
VERBOSE  desktop:  checking .desktop existence
VERBOSE  meteorApp:  updating .meteor/.gitignore
VERBOSE  meteorApp:  desktopHCP is enabled, checking for required packages
VERBOSE  electronAppScaffold:  clearing desktop-build
VERBOSE  electronAppScaffold:  creating /home/ellery/dev/lunafi/webapp/.meteor/desktop-build/app
VERBOSE  electronAppScaffold:  copying skeleton app
VERBOSE  electronAppScaffold:  writing package.json
VERBOSE  electronApp:  updating package.json fields
DEBUG  electronApp:  writing updated package.json
INFO  electronApp:  updating list of package.json's dependencies
DEBUG  electronApp:  merging settings.json[dependencies]
DEBUG  electronApp:  merging settings.json[plugins]
DEBUG  electronApp:  merging dependencies from modules
DEBUG  electronApp:  writing updated package.json
VERBOSE  electronApp:  calculating compatibility version
DEBUG  electronApp:  meteor-desktop compatibility version is  1
DEBUG  electronApp:  .desktop compatibility version is  0
INFO  electronApp:  issuing node_modules install from electron-builder
VERBOSE  electronApp:  rebuilding for x64
DEBUG  electronBuilder:  calling installOrRebuild from electron-builder for arch x64
  • installing production dependencies platform=linux arch=x64 appDir=/home/ellery/dev/lunafi/webapp/.meteor/desktop-build
INFO  electronApp:  issuing native modules rebuild from electron-builder
VERBOSE  electronApp:  rebuilding for x64
DEBUG  electronBuilder:  calling installOrRebuild from electron-builder for arch x64
  • no native production dependencies
VERBOSE  electronApp:  copying .desktop to temporary location
DEBUG  electronApp:  updating settings.json fields
INFO  desktop:  calculating hash version from .desktop contents
VERBOSE  desktop:  calculated .desktop hash version is 78da0902156ddb0e66ad8ef622ea2a0eb87e06a2
INFO  electronApp:  excluding files from packing
INFO  electronApp:  transpiling and uglifying
INFO  electronApp:  packing .desktop to asar
VERBOSE  electronApp:  clearing temporary .desktop
INFO  meteorApp:  checking for any mobile platform
INFO  meteorApp:  building meteor app
DEBUG  meteorApp:  clearing build dir
INFO  meteorApp:  acquiring index.html
(node:18660) [DEP0013] DeprecationWarning: Calling an asynchronous function without callback is deprecated.
INFO  meteorApp:  successfully downloaded index.html from running meteor app
VERBOSE  meteorApp:  copying mobile build
INFO  meteorApp:  acquiring manifest.json
INFO  meteorApp:  successfully downloaded manifest.json from running meteor app
INFO  meteorApp:  mobile build copied to electron app
DEBUG  meteorApp:  copy cordova.js to meteor build
INFO  meteorApp:  injecting isDesktop
INFO  meteorApp:  injected successfully
INFO  meteorApp:  packing meteor app to asar archive
VERBOSE  meteorApp:  clearing meteor app after packing
INFO  meteorApp:  meteor build finished
INFO  electronApp:  running
info: [main] app data dir is: /home/ellery/.config/CoygoApp
info: [main] initial desktop version is  78da0902156ddb0e66ad8ef622ea2a0eb87e06a2_dev
info: [main] using desktop.asar from initial bundle: /home/ellery/dev/lunafi/webapp/.meteor/desktop-build/desktop.asar
debug: [main] skeleton version 1.3.0
info: [main] ready fired
info: [main] seting autoupdate feed to url: http://127.0.0.1/update//0.0.1
debug: [main] loading plugin: meteor-desktop-splash-screen
info: [meteor-desktop-splash-screen] [splashScreenHtml] preparing splash screen
info: [meteor-desktop-splash-screen] [splashScreenHtml] splash screen prepared
info: [meteor-desktop-splash-screen] [splashWindow] displaying splash screen from file:///home/ellery/.config/CoygoApp/splash.html
info: [meteor-desktop-splash-screen] [updateScreenHtml] preparing splash screen
info: [meteor-desktop-splash-screen] [updateScreenHtml] splash screen prepared
debug: [main] loading internal module: autoupdate
debug: [main] loading internal module: dummy
debug: [main] loading internal module: localServer
info: [localServer] last used port is 57212
debug: [main] loading internal module: storageMigration
debug: [main] loading module: example => example
verbose: [autoupdate] initializing autoupdate module
verbose: [autoupdate] trying to read initial bundle version
verbose: [autoupdate] [AssetBundle] making bundle object for /home/ellery/dev/lunafi/webapp/.meteor/desktop-build/meteor.asar
verbose: [autoupdate] [AssetBundle] loading manifest from /home/ellery/dev/lunafi/webapp/.meteor/desktop-build/meteor.asar
debug: [autoupdate] [AssetManifest] 89 entries. (Version: 49b3ea4ffe64d1bbc9bcbb84d96a0252ef17dfc0)
verbose: [autoupdate] [AssetBundle] trying to read desktop version for 49b3ea4ffe64d1bbc9bcbb84d96a0252ef17dfc0
verbose: [autoupdate] [AssetBundle] the desktop version is 78da0902156ddb0e66ad8ef622ea2a0eb87e06a2_dev
verbose: [autoupdate] using initial asset bundle
info: [desktop] hello
debug: [main] desktop loaded
debug: [storageMigration] newest storage (Local Storage) entry is null
info: [localServer] will serve from:  /home/ellery/dev/lunafi/webapp/.meteor/desktop-build/meteor.asar
info: [localServer] assigned port 57212
verbose: [autoupdate] started startup timer
debug: [autoupdate] timer set to 60000
debug: [main] protocol meteor:// registered
debug: [main] opening meteor://desktop
verbose: [meteor-desktop-splash-screen] [splashWindow] enabling click through
[18682:0805/134042.299934:ERROR:CONSOLE(5255)] "SyntaxError: Unexpected token < in JSON at position 0", source: chrome-devtools://devtools/bundled/inspector.js (5255)
verbose: [autoupdate] startup did complete, stopping startup timer (startup took 1365ms)
info: [main] assuming meteor webapp has loaded
startup took: 1900.227ms
debug: [main] showing main window
debug: [main] received did-stop-loading
info: [main] assuming meteor webapp has loaded
debug: [main] window already loaded
wojtkowiak commented 6 years ago

Hmm there is nothing weird in here. But wait - there is one thing I should've noticed before -> meteor:80/socket.io, where did you get the socket.io from? I mean meteor uses sockjs. Are you opening another websocket connection through socket.io?

lunafi-evan commented 6 years ago

@wojtkowiak good call out, this project is using meteor-vue for Vue integration, which runs a local dev server for hot reloading over socket.io

lunafi-evan commented 6 years ago

@wojtkowiak it looks like this could issue might be helpful

https://github.com/electron/electron/issues/6802 which points to this https://github.com/electron/electron/issues/6749#issuecomment-238023155

Use webFrame.registerURLSchemeAsPrivileged for fetch api to support the scheme. Although if you are trying to send CORS request it will error at the moment.

If that's true, is there a way to access that webframe API currently in meteor-desktop?

lunafi-evan commented 6 years ago

Alright @wojtkowiak I've gone pretty deep here to try and figure it out. Here's what I've got:

This issue only occurs during local development, it's because the client can't connect to the socket.io server that the akryum:vue-component package sets up on localhost:3003 to allow HMR with .vue files (similar to a JSX compiler for React). If I bundle it for production everything works fine

In my client side index.js, I've added this line

  Desktop.electron.webFrame.registerURLSchemeAsPrivileged('meteor', { corsEnabled: true });

Now instead of this error disallowing the request entirely (which I showed in my original post) image I get this error instead. The browser allows the request, but it's not being sent to the Vue dev server on localhost:3003/socket.io. Instead it's being redirected somehow to meteor://meteor:80/socket.io. This is weird, look at the URI image

I suspect that redirect might be happening here but I'm not sure https://github.com/wojtkowiak/meteor-desktop/blob/0aa0da8847682ff03cee2181e1ac8248a9a0805e/skeleton/app.js#L618

Really I just need those requests to be sent to localhost:3003/socket.io but they're being redirected to meteor://meteor:80/socket.io. Any ideas on how to make that happen?

wojtkowiak commented 6 years ago

Big thanks for digging into it. Vue and meteor-vue are very new to me so I had to put some hours to check it.

Firstly I was trying to understand how the meteor:80 is getting there - I've read full code of vue-component-dev-client and vue-component-dev-server but had no luck with it. I did set HMR_URL=http://127.0.0.1:3003 to force the localhost and it did the trick...

So with HMR_URL I've went through the first issue. Even though I did force http://127.0.0.1:3003 it now tried to access meteor://127.0.0.1:3003 what made me very angry (!). It took few hours to dig really deep and I've found that a node-XMLHttpRequest lib that is used by socket.io has this: https://github.com/mjwwit/node-XMLHttpRequest/blob/master/lib/XMLHttpRequest.js#L297 which seems ok, it sees http and everything's fine until this line https://github.com/mjwwit/node-XMLHttpRequest/blob/master/lib/XMLHttpRequest.js#L351 where it strips the protocol from the path, because it assumes that we are on http, so the with the protocol stripped chrome takes the default one which is meteor now.

So... I know what is happening but at the moment I do not really have a viable solution in mind for this. As a first workaround I will try to force chrome to redirect the meteor://127.0.0.1 to proper http underneath so we will see if this works. I've run out of time today and I will be on holiday the next two weeks so I should have something around 1st of Sept.

lunafi-evan commented 6 years ago

@wojtkowiak any update on the direction for a solution to this? did the forced redirect work? if not perhaps we can fork that library and change that one problematic line if there's no way to force it

lunafi-evan commented 5 years ago

@wojtkowiak update, I've managed to disable the HMR that meteor-vue does over a websocket via export NO_HMR=1. this allows the styles and everything to load properly on initial pageload since its avoiding the loading over the websocket on meteor:80 entirely and relying on Meteor autoupdate package instead.

but it looks like the autoupdate package is complaining about loading over 127.0.0.1, so the page loads correctly initially but always fails to update on code changes

image