Server Events error during hot reload with Vuetify-Nuxt

ServiceStack Server Events
1

Hi guys,

I am receiving the following error during the hot reload development experience with the vuetify-nuxt template when using the server events client :

image
image811×40 2.27 KB

This only happens when using the nuxt development proxy (i.e. : when running “npm run dev” to enable the hot reload experience on http://localhost:3000). If I run “npm run build” and then browse to http://localhost:5000, the server events client connects as expected:

image

If I take a look at the response from the server events connection I can see that this is normal on http://localhost:5000 :

image
image861×140 8.18 KB

but sure enough - I am getting an html page back on http://localhost:3000 (obviously a result of the proxied hotreload process):

image
image715×119 8.71 KB

Is there a way to get around this behavior that I am missing? I can’t see anything relevant in the documentation?

2

figured this out - simple workaround (facepalm) : just changed my server events client to connect to “http://localhost:5001/” instead of “/” :

client: new ServerEventsClient("http://localhost:5001/", ["sync"], {
      handlers: {
3

I spoke too soon - I received a stream of “connection refused” errors, and (assuming that it was CORS-related), I enabled the CORS Feature…now I am seeing empty responses (only when browsing on http://localhost:3000)

image
image794×105 3.16 KB

any ideas on what else I can try here?

4

Isn’t the URL for the dotnet app hosted on SSL? i.e. https://localhost:5001

The dotnet App URL convention is http://localhost:5000 for HTTP or https://localhost:5001 for SSL

5

YES! Great catch - that resolved it!

I’m now getting a CORS-related issue, despite having the CORS Feature enabled (with default configuration). Is there a quick answer to why that would be happening?

image
image802×48 4.73 KB

6

Does your CorsFeature have an explicit origin set for the CORS URL you’re trying to access it from, e.g:

Plugins.Add(new CorsFeature(
    allowOriginWhitelist: new[] { "http://localhost:3000" },
    allowCredentials: true,
    allowedHeaders: "Content-Type, Authorization"));
7

It wasn’t - but is now. Working perfectly.

Thank you for the assistance and the quick turnaround, @mythz - as usual, you’re amazing :+1:

1 Like