Cross-Origin Request Blocked when using custom host = "0.0.0.0"

[kaceo]

Description

When a custom host is used in gridsome.config.js, the client cannot connect to the graphql layer

 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
 http://0.0.0.0:8080/___graphql. (Reason: CORS request did not succeed).[Learn More]

Steps to reproduce

1. Clone gridsome/gridsome-starter-markdown-blog on test machine (IP = 192.168.1.1)

2. yarn upgrade

3. edit gridsome.config.js to include "host: 0.0.0.0"

4. yarn develop

   Compiled successfully in 7199ms
   Site running at: http://0.0.0.0:8080/
   Explore GraphQL data at: http://0.0.0.0:8080/___explore

5. From second workstation, use browser to access 192.168.1.1

Expected result

Home page of the test blog

Actual result

Empty screen.
Console log shows:

  OPTIONShttp://0.0.0.0:8080/___graphql 
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 
  http://0.0.0.0:8080/___graphql. (Reason: CORS request did not succeed).[Learn More]

[kaceo]

Also to add the following observation:

  $ gridsome develop --help

  Usage: develop [options]
  
  start development server
   
   Options:
     -p, --port <port>  use specified port (default: 8080 )
     -h, --host <host>  use specified host (default: 0.0.0.0)
     -h, --help         output usage information

So the specification intends for port and host to default to these values, but the actual source line
in file https://github.com/gridsome/gridsome/blob/master/gridsome/lib/app/loadConfig.js
line 55 56 are:

   config.host = args.host || localConfig.host || 'localhost'
   config.port = parseInt(args.port || localConfig.port, 10) || 8080

shows that default host is localhost and not 0.0.0.0

This appears to be the default host is actually localhost. Perhaps that is why
the CORS error wasn't noticed when testing against localhost, but in a cross
machine environment would be flagged.

[kaceo]

Upon changing the gridsome.config.js file and set host = 192.168.1.1 the rest of code works.
So the original strategy of setting host to localhost only should also work, for environment where
server = client = localhost.

So the simple solution, to be added clearly into the documentation, is to put the actual IP into the gridsome.config.js and not to use "0.0.0.0". This means a source repo may have a fixed IP in the config.

The more complex solution, is to separate the host of the client and server into two constants:

1. the client host (meaning the URL where the browser talks to Vue) can be set to 0.0.0.0, for an IP-agnostic config.

2. the server host, which is the URL that the Vue app talks to the GraphQL components. This is usually localhost or the actual IP, if running without CORS headers. But it needs to have CORS headers set correctly if set to 0.0.0.0, so that GraphQL explorer can be invoked from another IP address.

I hope my analysis is correct, since I have only one day experience with Gridsome so I really don't know too much about it, but conceptually it is very similar to Nuxtent and that also uses a separate content server bundled into the build process.

[tanc]

Hi @kaceo I've also been having problems with a similar set up, complicated by trying to gridsome in docker containers on a different machine from my browser. See #58 for some more information.

In my case I can't seem to get it working unless I hack a file to specify a particular IP/domain for the GRAPHQL_ENDPOINT

[kaceo]

Yes I imagine the use of docker container would complicate the situation because the client and server are on different hosts and both CORS and firewall may stop direct access without throwing meaningful error.

The basic starter template should be able to run without additional IP configuration on a client != server IP situation -- but it doesn't currently. This means anyone trying Gridsome for the first time may give up when even the starter template could not run correctly.

[griable]

It worth mentioning you can also get it working by setting the host to 0.0.0.0 in the config and use the GRAPHQL_ENDPOINT environment variable.

This can be achieved by adding a .env file at the root of the project containing :

GRAPHQL_ENDPOINT=/___graphql

This way it won't be necessary to manually enter the IP every time.

[hjvedvik]

We are improving this in the next release :) #58 (comment)