Apollo-client: when add options `mode: "no-cors"` it break the request and Apollo Server fail, 500 error

[nisimjoseph]

Intended outcome:
GraphQL call execute without CORS

Actual outcome:
server response 500 error

How to reproduce the issue:
use this code in the client, occur all the time.

const apolloClient = new ApolloClient({
    networkInterface: createNetworkInterface(
        {
            uri: "http://domain.com/graphql?",
            opts: {
                mode: "no-cors",
            },
        }),
    dataIdFromObject: (value:any) => value.id,
    initialState: {},
});

[helfer]

I'm pretty sure this has nothing to do with apollo-client because it just passes the option to the underlying fetch library. I suggest you open the issue there, or on the server library if you think the server is at fault.

[pencilcheck]

It's weird how it breaks only when it is fetched in the browser not in the server though

[kulikovviktor]

When network Interface configured as no-corse, all requests has content-type: plain/text instead application/json. I'm not sure thats problem is Apollo or native fetch implementation, but with cors all headers are correct

[prakasa1904]

same problem, request header content-types is changes to Content-Type:text/plain;charset=UTF-8
but the response 500 and body response is errors POST body missing. Did you forget use body-parser middleware?

how to handle this ?

[rohmanhm]

Got the same issue like @prakasa1904 had.
Anyone have a solution for this one?

[ssuvorov]

I don't use createNetworkInterface. My working setup. ("apollo-client": "^2.4.3")

export const graphQLClient = new ApolloClient({
  link,
  fetchOptions: {
    mode: 'no-cors',
  },
  cache: new InMemoryCache()
});

[d9su]

Apparently it's an issue on the server side, nothing to do with the apollo client. Context: https://github.com/github/fetch/issues/318#issuecomment-249573195

TL;DR is that in no-cors mode, the Content-Type header becomes immutable and can only take one of these values: application/x-www-form-urlencoded, multipart/form-data, or text/plain. Hence if we want to be in no-cors mode, the server needs to be able to handle the content as these content types 🤷‍♂️ .