JS 获取无法设置 headers

Question

我有一个反应应用程序连接到 Spring 启动后端应用程序，我使用 JWT 在后端授权用户。我正在使用 fetch 在前端和后端之间进行调用。

每当我尝试设置调用的 headers 时，所有 headers 都会被删除，包括 Cookie（包含 JWT）。我需要设置 headers 来指定请求的 content-type。

-当我没有设置headers时调用（导致415）

获取代码：

return fetch(`${urlApiGateway}${url}`, {
    method: "POST",
    body: body,
    credentials: "include",
})

通话：

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,nl-NL;q=0.8,nl;q=0.7
Connection: keep-alive
Content-Length: 13
content-type: text/plain;charset=UTF-8
Cookie: Authorization=Bearer_eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJjYXNwZXIubS50b3JlbjJAZ21haWwuY29tIiwiZXhwIjoxNjI1NDg2MzAzLCJpYXQiOjE2MjUzOTk5MDMsInVzZXIiOnsiaWQiOjIsIm5hbWUiOiJjYXNwZXIiLCJlbWFpbCI6ImNhc3Blci5tLnRvcmVuMkBnbWFpbC5jb20iLCJwYXNzd29yZCI6IiIsInBlcm1pc3Npb25zIjoiQURNSU4ifX0.JdW1M7d8HB71yvP7dupomN-bgD_484HHbxmfnOOmvqM
Host: localhost:8080
Origin: http://localhost:3000
Referer: http://localhost:3000/
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

如您所见，headers 像 'content-type' 和 'Cookie' 一样存在。

- 当我设置 headers 以防止 415

时调用

获取代码：

return fetch(`${urlApiGateway}${url}`, {
    method: "POST",
    body: body,
    headers: { "Content-Type": "application/json" },
    credentials: "include",
})

通话：

似乎进行了 4 次调用，其中 2 次与之前的提取设置相同（未设置 headers）。

2 个调用如下所示

Provisional headers are shown
content-type: application/json
Referer: http://localhost:3000/
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

和 2 看起来像这样

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,nl-NL;q=0.8,nl;q=0.7
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:8080
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

如您所见，headers 已消失，包括 Cookie 和 content-type。

- Spring 启动项

@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins(allowOrigin, "http://localhost:3000")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedMethods("GET", "POST", "OPTIONS");
    }

希望有人能帮忙:)

Answer 1

您必须将 Authorization Bearer 令牌作为 header 传递。试试这个：

let yourAuthToken = .... // get bearer token from where you store it

return fetch(`${urlApiGateway}${url}`, {
    method: "POST",
    body: body,
    headers: {
      'Authorization' : 'Bearer ' + yourAuthToken
    }
})

Answer 2

和js代码没有关系，是我后台的cors设置。我的授权过滤器也被应用于导致 cors 错误（无 http ok 状态）的 OPTIONS 请求，更改后它已修复。

感谢所有试图帮助我的人。

JS 获取无法设置 headers

JS fetch unable to set headers

javascript

java

fetch

cors

reactjs