Call API Request from Client-side to use cookie for Authorization

[dzuncoi]

Description

I am new to React and decide to use create-react-app for my next project. Now I have an api server at myapi.domain.com and it is authorized by using cookie. In my react project, I use fetch to make request, for example, at myapi.domain.com/v1/getData. When I compare this request with the request I type directly to browser address, I can see a difference.

Expected behavior

The connect.sid value in Cookie field in 2 requests headers are the same.

Actual behavior

The connect.sid value in Cookie field in 2 requests headers are different, so my api server cannot authorize the request.
I assume that when using fetch, the request is not called from client-side, so it cannot get the cookie stored in browser.

So in this case, how can I call a request from client-side (to use cookie stored in browser)?

Sorry for my bad English and explanation.

[shrynx]

Can you explain the issue a bit further, and maybe provide screen shots of failed request. Though my initial guess, connect session uses httpOnly cookie.
One way would be to disable it.
eg

app.use(express.session({
    secret: 'mySecret',
    cookie: { httpOnly: false }
}));

But it is advisable to use same-origin ( Only send cookies if the URL is on the same origin as the calling script) or include (Always send cookies, even for cross-origin calls.)
Please refer these documentations

• https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials
• https://developer.mozilla.org/en-US/docs/Web/API/Request/Request

[shrynx]

Also i would recommend to use , axios (https://github.com/mzabriskie/axios) , it has inbuilt support for promises, and provides syntactic sugar. with axios you would have to pass something like :

axios.get('http://my.url', {
    withCredentials: true
})
.then( (response) => {
    console.log(response.data)
})

[dzuncoi]

@shrynx Thanks for your quick responses, especially withCredentials: true in the 2nd one, now I use credentials: 'include' in fetch and problem is solved.
Thanks.