szymmis/vite-express

Header definitions for static routes (e.g. cors()) not supported

Closed this issue · 5 comments

xb36 commented

First of all: Thank you for sharing your code. It helped me to start learning 3 big frameworks/solutions at once without the huste of integrating one into the other: vite/preact and express that is (ouff!... was bout time, tho, and I'm glad I now have an insight).

Anyway, I am done with my awesome web widget, and want to ship to production, build my custom files (also learned something about rollup, awesome!) and hit a cors error: Cross Origin request blocked because the CORS Header is missing.

  if (Config.mode === "production") {
    ...
    app.use(express.static(distPath));
    ...
}

The above code, taken from your main.ts file, defines the routes for the static/bundled files. Now when I want to include my widget on a different origin, the headers are missing.

I may be able to define custom routes as a workaround and serve the files using the headers I need (in my case Access-Control-Allow-Origin header).

It took me hours and hours to figure out what happened, I had to dig deep into the unglory universe of "just allow "*". Ugh. I could not figure out how to work around this issue unless I remove or change your code, and that would be a shame after what you enabled me to scaffold and learn from. So I report this as an issue.

My suggestion is that you leave the route definitions to the developer (don't configure any static routes). It takes away part of the comfort that vite-express offers, but it would allow better control and more finegrained configurations. What do you think? Do you have any ideas for an elegant workaround? Otherwise, I would be happy to file a pull request once we could confirm that this indeed is a bigger issue, yet another thing to learn ^^'. Greeting and happy hackin'!

Hi @xb36, I'm really glad to hear that you found that piece of software useful. Thank you for such a great description of your problem, also big shout out to you for opening and issue instead of just tossing it out and moving on, really means a lot to me, thanks! Your issue seems related to #47. Basically the way static serving middleware is injected right now doesn't give much control over what happens before and after, so you cannot use compression or cors middleware together with vite-express. I thought about this problem a lot and I think that I found the solution.

I've just created a PR with that and I hope I'll merge it and ship the next version as soon as I'll be sure that I'm not breaking anything.

I don't know if I understand your case correctly, but after that change you'll be able to use cors middleware in express so that you won't have that Access-Control-Allow-Origin header problems.

Also you can always disable vite-express completely in production mode by using some kind of if to block it out like that

const app = express()

if(isProduction()){
  app.listen(3000, () => /*...*/ )
} else {
  ViteExpress.listen(app, 3000, () => /*...*/ )
}

Or any kind of variation of that, but I'm trying to make such changes that you won't need to separate the logic between production and development modes.

Hi again @xb36, I've just published v0.7.0 where this problem should be resolved as you should be able to just use the cors middleware without any internal modifications etc. If you have any problems or questions feel free to continue this thread. Thanks a lot for raising this issue. Also thanks a lot for offering your help in form of opening a PR, if in the future there will be any problem and you'll feel that you can tackle it, I'd be grateful if you do that as all help is greatly appreciated. Thanks again!

xb36 commented

Hi @szymmis, thank you for the fast and friendly reply. For now I cloned the repo and commented out the respective line, but as soon as I could test your new implementation, I'd be happy to report the outcome here and use your official version again. Would be a win-win, so no reason to thank me for that ;-) Thanks to you, anyway, have a nice week.

xb36 commented

Just to give you a heads-up: I re-migrated today and everything is working as expected. The latest release actually fixed another issue I had with mssing JSON body in a POST request, so thanks again and keep up the good work! 👍

Thanks a lot for checking out the update and letting me know. I'm glad that everything is working and you can continue to use it. As always if you have other questions and problems feel free to ask, thanks for everything again @xb36!