Cannot GET /playground

[AntoninSlejska]

After installing and starting the server:

npm start

> graphql-mongodb-server@1.0.0 start C:\Workspace\Sites\react\graphql-mongodb-server
> npm run server


> graphql-mongodb-server@1.0.0 server C:\Workspace\Sites\react\graphql-mongodb-server
> nodemon --exec babel-node server/index.js

[nodemon] 1.18.10
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node server/index.js`
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
�� Server is running on http://localhost:4000
MongoDB connected

I receive the following error message at http://localhost:4000/playground:

Cannot GET /playground

If I change the URL e.g. to http://localhost:4000/graphql, then I get:

Cannot GET /graphql

In the console I see the following error messages:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). users:1:1
Content Security Policy: The page’s settings blocked the loading of a resource at data:font/woff2;base64,d09GMgABAAAAADKgA… (“default-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at data:font/woff2;base64,d09GMgABAAAAADB4A… (“default-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at data:font/woff2;base64,d09GMgABAAAAABDIA… (“default-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at data:font/woff2;base64,d09GMgABAAAAABkIA… (“default-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at data:font/woff2;base64,d09GMgABAAAAABqsA… (“default-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at data:font/woff2;base64,d09GMgABAAAAABUkA… (“default-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at data:font/woff2;base64,d09GMgABAAAAAB4AA… (“default-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). users:1:1
Content Security Policy: The page’s settings blocked the loading of a resource at eval (“default-src”).
Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://83088240-0f93-4b6a-9152-e32a2373f081/node_modules/webextension-polyfill/dist/browser-polyfill.js
Source Map URL: browser-polyfill.js.map[Learn More]
Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://8dd165e0-5819-47ef-98ca-542db01eafbb/content/js/purify.min.js
Source Map URL: purify.min.js.map[Learn More]```

[jdgabriel]

Do you use the Firefox browser? Firefox contains a native fetch implementation and does not use this polyfill code

Try add CORS to options inside the server.start()

Maybe solve. :)

[AntoninSlejska]

Hi Gabriel and thanks for your answer.

I have found that the port 4000 was by some other app blocked. After changing port, everything works perfect.

server/index.js:

const options = {
  port: process.env.PORT || "4009",
  endpoint: "/graphql",
  subscriptions: "/subscriptions",
  playground: "/playground"
};