[Resolved, but with possible security hole] Cordoba client can't access http://xx.xx.xx.xx:3000/graphql. Apollo server CORS config problem

[juanmafont]

I'm trying to launch Vulcan from android mobile.

But I got an error into javascript remote client console:

OPTIONS http://192.168.43.20:3000/graphql 405 (Method Not Allowed)

Note: android/Cordova apk client was compile using below command.
meteor build ../out_apk --debug --verbose --server=http://192.168.43.20:3000

I think maybe is a bug like comment here -> apollographql/apollo-client#529

But I can not find into Vulcan code the way to pass to createApolloServer() function CORS options to enable it from an external ip or server.

[juanmafont]

Resolved ¡¡¡¡¡

Adding cors npm package https://www.npmjs.com/package/cors
npm install cors

and modify packages/vulcan-lib/lib/server/apollo_server.js

add
import cors from 'cors';

modify line:
const graphQLServer = express();
with
const graphQLServer = express().use('*', cors());

Now Cordoba/Android client runs.

NOTE 1:
You also must add to your package.json the line (add to "dependencies": )
"cors": "^2.8.3",

NOTE 2: I think that cors using '*' is a opened security hole, maybe reading options to using with cors from another vulcan config file will be good.

[eric-burel]

Hi,

The weird part is that on Cordova request are sent to an IP that is'nt localhost, can this be solved ? By default the meteor DDP server is whitelisted. I guess this adress correspond the Apollo server, that isn't whitelisted by default.
If we could obtain its adress, we could whitelist it too.

Maybe a Meteor.isCordova around the cors setup would at least prevent this security flaw at least on the web version.

[SachaG]

Maybe we could also ask MDG directly how to properly configure Apollo server to work with Meteor+Cordova?

[sebastiangrebe]

Maybe this is not the greatest solution but setting cors to "*" is a bad idea because some warnings are thrown at least for me.

I went with this solution:

var whitelist = ['http://localhost', 'https://example.io','https://www.example.io']
var corsOptionsDelegate = function (req, callback) {
  var corsOptions;
  if (whitelist.indexOf(req.header('Origin')) !== -1) {
    corsOptions = { origin: true } // reflect (enable) the requested origin in the CORS response
  }else{
    corsOptions = { origin: false } // disable CORS for this request
  }
  callback(null, corsOptions) // callback expects two parameters: error and options
}

// createApolloServer
const createApolloServer = (givenOptions = {}, givenConfig = {}) => {
  const graphiqlOptions = { ...defaultConfig.graphiqlOptions, ...givenConfig.graphiqlOptions };
  const config = { ...defaultConfig, ...givenConfig };
  config.graphiqlOptions = graphiqlOptions;

  const graphQLServer = express().use('*', cors(corsOptionsDelegate));

This is done when the apollo server is started.

[eric-burel]

We now have a cors setting, either enabling all (public api) or a whitelist of domain

  "apolloServer": {
    "corsWhitelist": [],
    "corsEnableAll": false
  }