Question

这是我的fetch代码的样子

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标头，也不是传递JWT的正确方法。

你可能意味着

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

当Bearer不在允许的标题列表中时发送将无法进行飞行前验证。

当Curl命令成功时，获取OPTIONS返回HTTP 401

1 个答案: