I’ve setup the react UI in Cloudflare Pages with custom domain https://ui.example.com. There is a login page that allows users to key in user name and password. Once they’ve supplied the info, it will use axios to make a call to an API that is hosted in Cloudflare Workers https://apis.example.com and from there I’ve written sample codes to return Set-Cookies header with the “secret-token” value.
Since Pages and Workers reside in different domain, so I’ve configured Workers to supplied the following values to the API response, in addition to Set-Cookies header-values:
"Access-Control-Allow-Origin": "*"
"Access-Control-Allow-Methods": "*"
"Access-Control-Allow-Headers": "*"
"Access-Control-Expose-Headers": "Set-Cookie"
But when I check the response headers by using script (console.log) written in my login.jsx, it only contains content-length and content-type. But when I check the response from Chrome (Developer Tools’ Network) in my case, those header-values above exist.
How can I get the response’s header values from the axios call in this case?
You will need to use a different header name.
Set-Cookie is a forbidden response header, which means JavaScript is not permitted to read this header. The browser handles this header (adding the cookie to cookie storage) and then removes it before JavaScript sees the response at all.
Instead, try inventing your own header name, like X-Secret-Token.