custom headers omited in the preflight OPTIONS request

Intended outcome: If I set a custom header using this code:

const httpLink = new HttpLink({
  uri: "https://api.newrelic.com/graphql",
});

const authMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      "api-key": "123",
    },
  }));

  return forward(operation);
});

const client = new ApolloClient({
  link: concat(authMiddleware, httpLink),
  cache: new InMemoryCache(),
});

I expect the header: "api-key": "123" do be part of the preflight OPTIONS request

Actual outcome: The actual request that apollo-client is fetching is this:

fetch("https://api.newrelic.com/graphql", {
  "headers": {
    "accept": "*/*",
    "accept-language": "en-GB,en-US;q=0.9,en;q=0.8",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "cross-site"
  },
  "referrer": "http://localhost:3000/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": null,
  "method": "OPTIONS",
  "mode": "cors",
  "credentials": "omit"
});

request from the browser (using react-apollo-error-template) The request is missing the header api-key: 123

How to reproduce the issue: I used the react-apollo-error-template and I created a simple commit: https://github.com/casertap/react-apollo-error-template/commit/7158714ce977f07e5cf8d76fa46851569f0f3c59

The repo is here: https://github.com/casertap/react-apollo-error-template

Versions npx: installed 1 in 1.305s

System: OS: macOS 10.15.7 Binaries: Node: 12.20.0 - ~/.nvm/versions/node/v12.20.0/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 6.14.8 - ~/.nvm/versions/node/v12.20.0/bin/npm Browsers: Chrome: 106.0.5249.119 Firefox: 106.0 Safari: 15.6.1 npmPackages: @apollo/client: ^3.7.0 => 3.7.0

[jerelmiller]

@bignimbus looks like no-cors will omit anything but simple headers.

Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers.

I’ve tried the above and with no-cors and see that the api-key is omitted in the request. FWIW, I’m not able to successfully call New Relic’s API using plain fetch either, so I’m not so sure this is an issue with Apollo Client.

fetch('https://api.newrelic.com/graphql', {
  method: 'POST',
  headers: {
    "API-key": "xxx",
    'accept': 'application/json',
    'content-type': 'application/json',
  },
  body: JSON.stringify({ query: 'query { requestContext { userId } }' })
});

I actually think this is an issue with New Relic’s API itself. The docs use curl or GraphiQL for the examples, so unfortunately they don’t help much either.

I used to work at New Relic and have emailed someone that I know that works on the team in charge of the API. I’ll post back here when I hear back to see if that API allows CORS requests. More than likely, you’ll need to open an issue with New Relic to see if they will allow CORS requests to allow browser apps to use the API. I’m surprised I didn’t see more of this in my time there!

---

@casertap FYI, the Access-Control-Allow-Credentials is response header from the server that tells the browser whether to expose the response to JavaScript (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials) so unfortunately setting that header in the request won’t have any effect.

[jerelmiller]

@casertap since this issue looks like its on New Relic’s end, I’m going to go ahead and close this. Feel free to open it back up if you need additional help!