sachinraja / trpc-playground

playground for running tRPC queries in the browser
MIT License
281 stars 19 forks source link

add `https:` protocol to `cdnUrl` default config #29

Closed codyfyi closed 1 year ago

codyfyi commented 1 year ago

Safari throws a CORS fit without the https: protocol included in the default cdn url and won't load the playground. Other browsers seem fine.

Here is the error in the Safari console:

Cross-origin redirection to https://cdn.jsdelivr.net/npm/@trpc-playground/html@1.0.0-next.0/dist/assets/index.70ae6946.js denied by Cross-Origin Resource Sharing policy: Origin http://localhost:4000 is not allowed by Access-Control-Allow-Origin. Status code: 302

When I override the default render options the problem on Safari goes away:

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

I'm not sure if there is a downside you were trying to avoid by omitting the protocol, so there might be a tradeoff I'm not aware of by doing this.

sachinraja commented 1 year ago

I just stole that from GraphQL Playground: https://github.com/graphql/graphql-playground/blob/60f90a910f6df590c6c87cf3f8922a4f61ef454e/packages/graphql-playground-html/src/render-playground-page.ts#L95

I'd imagine they would have changed it already if it was really a problem

codyfyi commented 1 year ago

Interesting... I'm not sure what is going on here. I'm going to close this PR. If more people report Safari not working I can circle back and try to find the root cause, but the renderOptions solution in my comment above gets Safari working.