no-cors mode not including headers.

Intended outcome:

Hi, so I’ve been trying to connect to an authenticated production endpoint that is not on the same origin and first, I got cors issues from the browser so I tried the add the no-cors mode in the fetchOptions, so far so good, but then when I try to add the header to send the token, the header doesn’t appear in the request and I get 401 unauthorized.

Here’s my setup for the Apollo Client.

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

const uri = 'ENDPOINT'
const token = 'AUTH_TOKEN'
const httpLink = createHttpLink({
  uri: uri,
});

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      "X-Auth-Token": token,
    },
    fetchOptions: {
        mode: 'no-cors'
    }
  }
});

export default new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

Actual outcome:

This is the actual request that gets sent from the Apollo Client, as you can see there’s no x-auth-token header and it fails with 401.

:method: POST
:authority: THE_HOST
:scheme: https
:path: /graphql
content-length: 372
accept: */*
origin: http://localhost:8080
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
content-type: text/plain;charset=UTF-8
sec-fetch-site: cross-site
sec-fetch-mode: no-cors
referer: http://localhost:8080/
accept-encoding: gzip, deflate, br
accept-language: es,en;q=0.9

{"operationName":"QUERY","variables":{},"query":"THE_QUERY"}

How to reproduce the issue:

Simply by trying to make a query to an authenticated endpoint that is not in the same origin. Versions

System: OS: macOS Mojave 10.14.5 Binaries: Node: 12.13.1 - /usr/local/bin/node npm: 6.12.1 - /usr/local/bin/npm Browsers: Chrome: 79.0.3945.88 Firefox: 71.0 Safari: 12.1.1 npmPackages: @apollo/react-hooks: ^3.1.3 => 3.1.3 apollo-boost: ^0.4.4 => 0.4.4 apollo-cache-inmemory: ^1.6.5 => 1.6.5 apollo-client: ^2.6.8 => 2.6.8 apollo-link-context: ^1.0.19 => 1.0.19 apollo-link-http: ^1.5.16 => 1.5.16 react-apollo: ^3.1.3 => 3.1.3

[simpleshadow]

@baquedano Spent a few hours figuring this one out…

Got a clue to not use the auth link “middleware” and instead manipulate fetch from this issue https://github.com/apollographql/apollo-client/issues/5089#issuecomment-540605542.

EDIT: Client-side requires mode: 'cors' which means you need to set the Access-Control-Allow-Origin header to '*.

    const enchancedFetch = (url, init) => {
        const token = getToken()
        return fetch(url, {
            ...init,
            headers: {
                ...init.headers,
                'Access-Control-Allow-Origin': '*',
                ...(token && { authorization: `Bearer ${token}` }),
            },
        }).then(response => response)
    }

    const httpLink = new HttpLink({
        uri: process.env.HASURA_SERVER_HTTP_ENDPOINT, 
        credentials: 'include', 
        fetchOptions: {
          mode: 'cors',
        },
        fetch: enchancedFetch,
      })

[hari5004]

@baquedano Have you solved this issue ?