无法在 Svelte 中访问授权 header

Question

我是 Svelte 的新手，我正在尝试创建 API 的登录页面。 API 需要用户名和密码，returns 需要授权 header。我在 F12 开发人员控制台中看到授权 header，我可以通过代码访问其他 header，但不能访问授权 header。我在服务器上为 localhost:8080.

启用了 CORS

<script>
    const BASE_URL = ...;

    export let username;
    export let password;

    let result;
    let status;
    let body;
    let token;
    let contentType;

    async function doPost () {
        const res = await fetch(BASE_URL + 'authenticate', {
            method: 'POST',
            mode: 'cors',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                'username': username,
                'password': password
            })
        });

        const text = await res.text();
        status = res.status;
        result = text;
        token = res.headers.get('Authorization');
        contentType = res.headers.get('Content-type');
        if (!res.ok) {
            throw new Error(result);
        }

    }

</script>
Please log in<br>
<input type="text" bind:value={username}/>
<br>
<input type="password" bind:value={password}/>
<br>
<button type="button" on:click={doPost}>Log in</button>
<br>
Result: {result}
<br>
Status: {status}
<br>
Token: {token}
<br>
Content-type: {contentType}

回复header如下：

HTTP/1.1 200 
Server: nginx/1.20.0
Date: Tue, 31 May 2022 18:59:09 GMT
Content-Type: text/plain;charset=UTF-8
Content-Length: 8
Connection: keep-alive
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Access-Control-Allow-Origin: http://localhost:8080
Authorization: Bearer xyz...

登录后页面显示如下：

Result: Welcome!
Status: 200
Token: null
Content-type: text/plain;charset=UTF-8

服务器端（spring 启动）在身份验证方法上有以下注释：

@CrossOrigin(origins = "http://localhost:8080", allowedHeaders = "*", allowCredentials = "true")

如您所见，我可以访问 content-type header 但不能访问授权 header。如有任何帮助，我们将不胜感激。

Answer 1

我想通了。我需要将 exposedHeaders = "Authorization" 添加到服务器端的 @CrossOrigin 注释中。

Answer 2

我今天确实解决了这个问题。所以...我不完全确定为什么你不能访问在 HTTP 响应中发回的 cookie，我相信这与出于安全原因不允许 js 访问 cookie 相关数据有关。

我看到的一个初步问题是，您应该在 'set-cookie' header 中将 API 身份验证令牌发送到前端，并在 HTTP 响应中发送它body，我假设你的 API 是 JSON。我从未见过有人像您一样建议在 'Authorization' header 中发送它。我相信你很困惑。我将尝试阐明执行此操作的正确方法以及您最有可能感到困惑的原因。

您的后端将在成功登录后生成某种访问令牌。就像我说的，你在 'set-cookie' header 以及 HTTP body.

中发回它

现在，当您在前端读取响应时，您可以从 HTTP 响应 body 中检索 Auth 令牌，并在后续请求中使用它来对您的后端服务器进行身份验证。预计发送 JWT 令牌的方式在您请求的 'Authorization' header 中。这就是您混淆的地方，'Authorization' header 用于后续经过身份验证的服务器请求，而不是将 Auth 令牌从后端发送到前端。

现在在设置 'Authorization' header 的同时，您很可能需要在 'cookie' header 中发送相同的令牌。您可以通过将 {withCredentials: true} 选项与 fetch 结合使用来执行此操作。这将在成功登录尝试后将您在 'set-cookie' 响应 header 中发送的 cookie 发送回您设置此选项的所有后续请求的服务器。

希望这对您有所帮助，抱歉我正在忙 phone，所以我能写的东西有限。

无法在 Svelte 中访问授权 header

Unable to access Authorization header in Svelte

rest

authorization

cors

spring-boot

svelte