CORS issues with Angular and graphql-listen live updates on Azure

Hi @mat_jack1 , where can I find the solution post?

Thanks!

Hi @juaneneque, welcome to the forum!

I checked the old emails and it doesn’t look like what they were discussing there was widely applicable (it was a specific situation, not a general CORS issue).

What’s going on with your implementation? Are you using one of our libraries, and can you please provide some sample code and errors you’re seeing?

Hi @roger, thanks for responding. I am using graphql-listen, on localhost it works fine, but in development environment the connection has a pending status and after a few minutes the console shows a cors error.

@juaneneque, I’m spinning up a demo project now to try to replicate this, but can you help provide a little more info, please?

What library/framework/code are you using to subscribe to the events? Is it useQuerySubscription() inside react-datocms, datocms-listen, or something entirely different? Can you provide a code snippet?

And is there a particular service on Azure you’re hosting this on? (wait, sorry, that was the previous poster). Where are you hosting this? (i.e., what is the dev env running on?)

Just asking to make sure I can give you the right CORS solution for your particular implementation.

I’ll still try to reproduce the problem on my own, but any details (and especially code snippets) you can provide would be very helpful :slight_smile: Thanks in advance!

Hi @roger, It would be helpful to have a demo of the project.

I am using useQuerySubscription() from datocms-listen in an Angular project and the development environment is hosted on Azure Web App Service and I use NGINX.

Thanks!

Hey @juaneneque,

Thanks for the details and sorry for the delay here! @m.finamor and I are looking into this for you. Please give us a bit of time to investigate.

Most of our demo projects and snippets are in React or vanilla JS, and in my tests, those seemed to have worked fine, but that won’t help you here. We’ll have to try to replicate it by spinning up an Angular project.

In the meantime, I wonder if this might be something to do with Azure…? Tutorial: Host RESTful API with CORS - Azure App Service | Microsoft Learn It’s a bit strange to me because that’s meant for when you’re hosting an API on Azure, not the website. The request from datocms-listen should go straight from your browser to graphql-listen.datocms.com, so it’s not clear to me where the CORS error is happening.

Are you perhaps prerendering in Angular? Is it trying to fetch server to server instead of browser to server? If so, does the no-cors mode work, or manually adding CORS headers to the request?

Again, sorry for the vagueness here… please give us some time to make a sample project in Angular to see if we can usefully reproduce this. It might take us a while because it’s not a framework we regularly work in anymore :frowning: If you can provide any code snippets, that would help speed it up for sure.

Sorry for the delay, and thanks for your patience here!

@juaneneque, just an update: No conclusion yet, but still looking into it! I spent a few hours last week spinning up an Angular demo project and trying to get it to work, but couldn’t quite get it to make the call yet. Sorry, Angular has changed a lot since the last time I used it (nearly a decade ago) and I’m having to re-learn its new systems – specifically, trying to understand how Angular’s subscriptions tie into server-sent events and our wrapper.

I will keep trying, but I may not get very far without sample code of what you’ve tried so far. I’ll get as far as I can and share my demo if it succeeds, but any details you can provide would still be very helpful.

Thanks, and sorry for the delay on this! It’s not a stack we commonly work with anymore. I’ll also check with other devs to see if they have any input.

Hi @roger , I will try to share some sample code in a public repository. I suggest you use Angular 14 or 16. The latest version has big changes and it might be difficult to do API integration.

Reggards

1 Like

Thank you, that would be super helpful! If we can reproduce the error on your public repo, we can start tracking down the issue. Thanks for the help with this, and thanks for your patience too.

1 Like

Hey @juaneneque,

Just checking in here :slight_smile: Any luck with that public repo? I didn’t want this to fall through the cracks.

Thank you again!