question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

no-cors mode not including headers.

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:12
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
simpleshadowcommented, Jan 16, 2020

@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,
      })
4reactions
hari5004commented, Dec 18, 2020

@baquedano Have you solved this issue ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Trying to use fetch and pass in mode: no-cors - Stack Overflow
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If ...
Read more >
Common no-cors misconceptions - Evert Pot
Any request header except: Accept , Accept-Language , Content-Language , Content-Type will be silently stripped from the request. If Content- ...
Read more >
Fixing Common Problems with CORS and JavaScript
Tutorial: This post walks through troubleshooting and fixing common problems associated with calling REST APIs from JavaScript.
Read more >
set the request's mode to 'no-cors' to fetch the resource with ...
Error: ...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs ......
Read more >
Access to fetch been blocked by CORS policy - React Native + ...
This issue relate the 'no-cors' mode. Try to remove it. Access to fetch at 'https://localhost:40011/api/Games/GamesList' from origin 'http:// ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found