Being blocked by Cors

[ollyde]

Hey,

Amazing job on this library, really amazing. Using as docs for tRPC for our teams now.

We have one issue though, Firefox (not chrome or Safari) blocks the cors request, not sure why.

We have the express server setup with Cors enabled.

const app = express();
app.use(cors());

[sachinraja]

Amazing job on this library, really amazing. Using as docs for tRPC for our teams now.

Thanks! That's awesome.

Not sure why this is happening, I use Firefox and it works. Got a reproduction?

[ollyde]

@sachinraja I'm not sure why either. On my home laptop it works 🙈 but even if I clear the cache it still fails. Exact same server code.

[sachinraja]

Might have something to do with security settings maybe? JsDelivr is a fairly popular CDN though.

[ollyde]

@sachinraja it's default.

[ollyde]

@sachinraja I think it might be good to have the JS inside the project; loading from CDNs isn't great 🙈

[ollyde]

I'm still getting the error which is strange

[sachinraja]

It's much easier to put the files on a CDN than try to send the files directly from node_modules. Also the CDN way is how GraphQL playground works.

[ollyde]

@sachinraja ok, I never use CDNs for libraries :-P some people want to be able to use older versions consistently. Anyhow; I disabled CORS on Firefox for now; living on the edge! 😎

[codyfyi]

@ollydixon - I was getting the same error in Safari and resolved it by manually setting the CDN URL in the renderOptions like so:

renderOptions: {
   cdnUrl: 'https://cdn.jsdelivr.net/npm'
}

Not sure why but it seems to have to do with the protocol. Forcing it to use https by setting it in the cdnUrl prevents the 301 redirect from http to https and fixed the problem for me.

[ollyde]

Thanks cody I'll try this later. We're using the Playground pretty heavily for API docs across our projects (flutter and typescript hehe)

I don't feel so safe using the CDN as I don't see any versioning on it. Would be great to get a local solution! @sachinraja 🚀

[sachinraja]

@ollydixon That's only the base CDN url. trpc-playground adds the version to that url.

[ollyde]

@sachinraja I understand but many times I used old NPM packages and the CDN files no longer exist. Would be great if you could ship with the compiled JS code inside the package 😎 eternal support then, no worries 😎

btw it's a great tool, we use it for all our auto-docs on the TRPC project. Just one improvement, when you start getting 100s of endpoints the 'insert' function becomes a bit cluttered 😊