Don’t know if anyone has had this issue but I’m adding a manifest file in my root and adding it to my index file and when running dev server getting a CORs error even though it’s all in the same directory… Guessing some kind of processing is going on as works fine locally with live server?
1 Like
Did you ever resolve the CORS error?
No… Unfortunately not… Do you have a solution?
1 Like
No, I was just about to ask essentially the same question, which I thought would be extremely basic:
IDX + Static Website + PWA w/ service worker + CORS = how?
I have seen other “remotely” similar questions (pardon the pun), which references their guidance for full stack programming, which includes credential passing. But in my case, I just want to add a manifest.json file + service worker to a static website in order to make that site a PWA. I don’t have a back end to connect to, just the static site. I can actually manually navigate to the manifest.json and it will serve it to my browser, as it is in the same root directory as index.html. But it throws the CORS errors before any of my scripts are even running (so it isn’t a problem with the service worker code). My best guess is that when parsing the index.html it tries to load the manifest via the <link rel="manifest" href="manifest.json"> line, and that is where the CORS is blocking it.
I would have thought that PWA’s were a primary use case for Project IDX, so I was a bit surprised when I couldn’t find any documentation for this particular problem. I was hoping that you had fixed it and just hadn’t posted it!!
For CORS it depends on how you are serving the website and where you are viewing it.
Try using the public port and opening up the signed url in a new tab to see if the CORS issue goes away.
If that doesnt work you can setup a reverse proxy to have all the requests go through the same domain
I’m even getting it through vite.
I’ll try your suggestion
For vite you can set custom headers, but you might need a cors package to handle the preflight requests
I have found a solution for my project that seems related to the one mentioned in that full-stack article I read.
It turns out that you can add crossorigin="use-credentials" to the manifest’s link tag in index.html:
<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
1 Like
This worked a treat nice one!!
1 Like
Glad to hear it worked for you too, @Ben_Hewart!
It turns out that according to MDN:
The
crossoriginattribute, valid on the<audio>,<img>,<link>,<script>, and<video>elements, …
I wasn’t aware of it at all, and this probably would have helped my previous battles with CORS. So maybe this will be helpful to others as well going forward.
It might be a good footnote in the aforementioned Full-stack development in IDX blog post, even if it’s not strictly speaking a requirement for solutions utilizing a back end.
No I wasn’t aware of that either… Really appreciate it, as it was driving me mad… I had to switch back vs code 
I have marked it as a solution…
One issue I have recently found is playwright doesn’t work in project idx either… Someone ported the Vs code extension… This might be way
1 Like