Closed ananda-ghosh closed 4 years ago
Hey @ananda-ghosh, indeed you can't request a client-side token directly from the browser, because it will expose publicly your secret token. You must take the client side token from your server (as you do with curl), because it's safe. Then you can put the big token you received in your client side app and use this one directly in the browser.
I hope it's clear, let me know if you need more informations !
Well I'm confused, bc the client-side token seems to be set to expire in two hours. If I want to build a public-facing website that interfaces with Trefle, would I have to run some script on my server to update the key every two hours?
At two hours, I'd need to be updating it just while I'm in development. Maybe I don't get the whole picture of how this works in a live app.
I have the same issue but when calling the API from the client side with a fresh JWT token using Fetch:
fetch(`https://trefle.io/api/plants?q=rosemary?token=${JWT_TOKEN}`);
Results in:
Access to fetch at 'https://trefle.io/api/plants?q=rosemary?token={JWT_TOKEN}' from origin
'http://localhost:8080' 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,
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I tried fetching passing options, even with mode: 'no-cors', but returns a 401:
fetch(`https://trefle.io/api/plants?q=${query}?token=${JWT_TOKEN}`,
{
method: 'GET',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
}
);
@lewislbr Well my issue is not really the same. When I used a fresh JWT token in the rest of my browser code, I was able to get fetches to work fine. For two hours. Then I'd have to manually update my client-side token in the code. According to @lambda2, this is how it is supposed to work. So, to me, my question became, how do I build a client-side app that can call the Trefle API to search without having to update my client-side token every two hours?
I came up with an answer, and the short of it is that I used the concurrently package to run a server and a client on separate ports. My server uses a node-fetch and the regular secret token to request things from Trefle. This is not a browser call and not subject to CORS. My client calls my server through a proxy, the client-side fetch is not tagged as cross-origin either. This works great! I can go into more detail about how I accomplished this if you think you could use it, but I'll tell you that I started with this tutorial(which is linked in React documentation) to figure this all out.
@ananda-ghosh Thanks! I'll take a look at that tutorial and try to implement it on my application.
Describe the bug CORS support not properly implemented for client-side tokens.
To Reproduce Steps to reproduce the behavior:
TrefleDB.js:5 POST https://trefle.io/api/auth/claimtoken=***&origin=*** net::ERR_FAILED
Uncaught (in promise) TypeError: Failed to fetch
curl -i -X POST "https://trefle.io/api/auth/claim?token=***&origin=***"
HTTP/1.1 200 OK Server: nginx/1.14.0 (Ubuntu) Date: Sat, 17 Aug 2019 21:55:03 GMT Content-Type: application/json; charset=utf-8 Content-Length: 372 Connection: keep-alive cache-control: max-age=0, private, must-revalidate x-request-id: 2mtt8tp7c4f6ilqi4s133c53 Strict-Transport-Security: max-age=63072000; includeSubDomains; preload X-Frame-Options: SAMEORIGIN X-Content-Type-Options: nosniff
{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpcCI6WzQ4LDQ2LDQ4LDQ2LDQ4LDQ2LDQ4XSwiaXNzdWVyX2lkIjoxMTE2LCJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJhdWQiOiJKb2tlbiIsImV4cCI6MTU2NjA4NjEwMywiaWF0IjoxNTY2MDc4OTAzLCJpc3MiOiJKb2tlbiIsImp0aSI6IjJtdHQ4dHA3aGs5c2tscWk0czVyajUxMiIsIm5iZiI6MTU2NjA3ODkwM30.mmZ6QWyESWAbgTde3jJWaJrys-qnCTZ230a8tbzBtdU","expiration":1566086103}