获取选项返回 HTTP 401 而卷曲命令成功答案

【问题标题】：fetch OPTIONS return HTTP 401 while Curl Command succeeds获取选项返回 HTTP 401 而卷曲命令成功
【发布时间】：2017-10-30 06:51:43
【问题描述】：

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

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 请求，浏览器使用HTTP OPTIONS 发出preflight 请求，以确保它们确实发出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");
  }
}

这也可以在响应中看到

【问题讨论】：

这是CORS请求，所以你需要服务OPTIONS方法，它是服务器端的nodejs应用程序吗？如果是，那么只需安装 CORS 包 (npmjs.com/package/cors) 并执行 app.use(require('cors')());
是的，服务器有点痒，但是你可以看到CURL 的响应带有正确的标题和身份验证
@daydreamer simple curl 不会执行预检请求来获取 cors 允许的方法，但浏览器获取代码会执行。再说一遍：需要从服务器提供 200 OK 状态的 OPTIONS 方法。

标签： javascript rest curl fetch-api

【解决方案1】：

查看您的配置位置

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

您没有允许Bearer 标头，也不是传递JWT 的正确方法。

你可能是说

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

如果Bearer 不在允许的标头列表中，则发送它会导致飞行前验证失败。

【讨论】：

完全同意(: