no-cors mode not including headers.
See original GitHub issueIntended 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:
- Created 4 years ago
- Reactions:12
- Comments:9 (1 by maintainers)
Top GitHub Comments
@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 theAccess-Control-Allow-Origin
header to '*
.@baquedano Have you solved this issue ?