javascript - 当 Curl 命令成功时，fetch OPTIONS 返回 HTTP 401

Question

这就是我的获取代码的样子

let getSummary = (year, month) => {
        let url = baseUrl + "/rest/monthlySummaries/" +
            localStorage.getItem("paUserId") + "/" + year + "/" + month;

        let authHeaders = {
            "Content-Type": "application/json",
            "Accept": "application/json",
            "Bearer": localStorage.getItem("paToken")
        };

        console.log("summary url:", url, ",headers:", authHeaders);
        return fetch(url, {
            method: "GET",
            headers: authHeaders
        });
    };

因为这是 GET请求，浏览器发出 preflight使用 HTTP OPTIONS 请求确保他们确实使 HTTP GET要求。我记录了调用的电话，我看到

summary url: https://api.myapp.com/rest/monthlySummaries/userId/2017/4 ,headers: Object {Content-Type: "application/json", Accept: "application/json", Bearer: "41afa8432aaa411e48b6c1c637c77cb3:userId:84000000"}Accept: "application/json"Bearer: "41afa8432aaa411e48b6c1c637c77cb3:userId:84000000"Content-Type: "application/json"__proto__: Object
2VM50885:1 OPTIONS https://api.myapp.com/rest/monthlySummaries/cca6b151-cab4-4de2-81db-9a739a62ae88/2017/4 401 (Unauthorized)

当我在 curl 上做类似的事情时，一切正常

curl -v -X OPTIONS -H"BEARER:e3310afc4dcd68d80d56a83bddfd4a09:userId:564000000" "https://api.myapp.com/rest/monthlySummaries/userId/2017/4"
*   Trying 52.23.254.96...
* Connected to api.myapp.com (52.23.254.96) port 443 (#0)
* TLS 1.2 connection using TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384
* Server certificate: DigiCert SHA2 High Assurance Server CA
* Server certificate: DigiCert High Assurance EV Root CA
> OPTIONS /rest/monthlySummaries/userId/2017/4 HTTP/1.1
> Host: api.myapp.com
> User-Agent: curl/7.43.0
> Accept: */*
> BEARER:e3310afc4dcd68d80d56a83bddfd4a09:userId:564000000
>
< HTTP/1.1 200 OK
< Date: Mon, 29 May 2017 23:21:11 GMT
< Server: WildFly/8
< X-Powered-By: Undertow/1
< Access-Control-Allow-Headers: origin, content-type, accept, authorization
< Allow: HEAD, GET, OPTIONS
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Credentials: true
< Content-Type: text/plain
< Content-Length: 18
< Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, HEAD
< Access-Control-Max-Age: 1209600
< Vary: Accept-Encoding
<
* Connection #0 to host api.myapp.com left intact

为什么行为如此不同？我在 fetch 中缺少什么？

更新
我的server启用CORS支持

@Provider
public class CORSFilter implements ContainerResponseFilter {
  @Override
  public void filter(ContainerRequestContext containerRequestContext,
      ContainerResponseContext containerResponseContext) throws IOException {
    containerResponseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
    containerResponseContext.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
    containerResponseContext.getHeaders().add("Access-Control-Allow-Credentials", "true");
    containerResponseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
    containerResponseContext.getHeaders().add("Access-Control-Max-Age", "1209600");
  }
}

这也可以在响应中看到

Answer 1

查看您已配置的位置

.add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");

您尚未允许 Bearer header ，这也不是传递 JWT 的正确方法。 .

你的意思可能是

"Authorization": `Bearer ${localStorage.getItem("paToken")}`

当 Bearer 不在允许的 header 列表中时发送它将会导致飞行前验证失败。