Fetch API cannot load http://localhost:8000/. Preflight response is not successful

[jaredtmartin]

I'm running graphql and next as separate processes, but from the same project folder. My package.json contains the following scripts:

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "nodemon --exec babel-node --presets es2015 -- server.js",
    "graphql": "babel-node --presets es2015 graphql.js",
    "dev-graphql": "nodemon --exec babel-node --presets es2015 -- graphql.js"
  },

Here is my graphql.js file:

import express from 'express';
import graphQLHTTP from 'express-graphql';
import graphql from 'graphql';
import schema from './schema.js';
import mongo from './mongo';

const isDevelopment  = process.env.NODE_ENV !== "production";

const db = 'humble';
const path = "mongodb://localhost:27017/"+db;
const app = express();
let PORT = 8000;

app.use('/', graphQLHTTP({
  schema,
  graphiql:true,
}))

let server = app.listen(PORT, function () {
  console.log(`GraphQL server listening at ${PORT}`);
  console.log(`GraphIQL available at http://localhost:${PORT}/graphiql`);
  mongo.init(path);
});

I can confirm that graphql is working correctly and that my queries and mutations are correct via graphiql.
For Apollo I copied the lib folder from the with-apollo example. Here is the networkInterface argument to ApolloClient in the initClient.js file:

networkInterface: createNetworkInterface({
      // uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn',
      uri:'http://localhost:8000',
      opts: {
        credentials: 'same-origin'
        // Pass headers here if your graphql server requires them
      }
    })

The problem: I'm able query fine, but when I try to insert an item via a mutation I get:

[Error] Failed to load resource: Preflight response is not successful (localhost, line 0)
[Error] Fetch API cannot load http://localhost:8000/. Preflight response is not successful

Here's the code for my AddPost button:

import React from 'react'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'
import moment from 'moment'

function AddPost ({ addPost }) {
  return (
    <button type="button" onClick={() => addPost({title:"GOAAAALL!!"})}>Add Post</button>
  )
}

const addPostMutation = gql`
  mutation AddPost($_id:String $title:String!, $content:String){
    addPost(_id:$_id, title:$title, content:$content) {
      _id
      title
      content
    }
  }
`

export default graphql(addPostMutation, {
  props: ({ ownProps, mutate }) => ({
    addPost: ({title, content, _id}) => {
      console.log("title: " + JSON.stringify(title, null, 2));
      return mutate({variables: { title, content, _id },})
    }
  })
})(AddPost)

My research points to a CORS issue, but I have "credentials: 'same-origin'" in my initialization, and I don't get any errors querying data, so I'm not sure how to proceed. Any ideas?

[arunoda]

Since this is two different ports (for the client and server), you need to allow CORS on your GraphQL server.

Use this: https://github.com/expressjs/cors

[jaredtmartin]

Thank you. I'm beginning to think this is a GraphQL / Express issue not a Next issue.
I added the cors package to my project, imported it, and added app.use(cors()) just above app.use('/', graphQLHTTP({
I'm now getting

Failed to load resource: the server responded with a status of 400 (Bad Request)

[jaredtmartin]

That fixed it! The Bad Request error was due to a mistake in my GraphQL request. Thanks.

[josechavezm]

where are the two ports? I can't see it