fetch 跨域 basic认证问题

Question

问题描述

不知道描述的清楚吗，就是说preflight之后的那次请求是不是浏览器直接发起的，没有走我的前端代码？

===============================
前后端分离项目

前端通过fetch函数跨域发起basic认证，后台（spring security）认证结束后返回响应，
但是在fetch里面拿到的response里面没有相应的头信息

问题出现的环境背景及自己尝试过哪些方法

前后端分离，跨域请求时，参考了一些cors的讲解，在发起请求的时候，会先发起一个OPTIONs的
preflight预检，然后预检通过，执行真正的请求操作，但是在观察中，fetch拿到的respone没有任何头信息，不知道是不是浏览器给拦截了（用wireshark本地抓包，请求响应没有问题），详细见代码，不不知道我描述清楚了没有，之前一直写中间件，没有做过前后端结合的项目，所以完全
没有啥概念。。。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
这是抓包结果：

OPTIONS /pass-ui/login HTTP/1.1
Host: localhost:28080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 YaBrowser/18.6.1.770 Yowser/2.5 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
DNT: 1
Referer: http://localhost:3000/login
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,zh-TW;q=0.8,en;q=0.7

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: *
Vary: Origin
Access-Control-Allow-Methods: GET,POST
Access-Control-Allow-Headers: authorization
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Transfer-Encoding: chunked
Date: Mon, 23 Jul 2018 09:11:28 GMT

0

GET /pass-ui/login HTTP/1.1
Host: localhost:28080
Connection: keep-alive
Accept: application/json
Origin: http://localhost:3000
Authorization: Basic eGl1bG9uZy56aGFuZzoxMjM=
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 YaBrowser/18.6.1.770 Yowser/2.5 Safari/537.36
DNT: 1
Referer: http://localhost:3000/login
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,zh-TW;q=0.8,en;q=0.7

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: *
Vary: Origin
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
x-auth-token: ed61494a-aa55-4b46-a55c-6c665cf85ace
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Mon, 23 Jul 2018 09:11:28 GMT

20
{"server":"tomcat","java":"1.8"}
0

前端代码逻辑（typescript的）

return fetch(PASS_URL + "/login", {
    method: "GET",
    headers: {
        "Authorization": basicEncode(username, password),
        "Accept": "application/json",
    },
    mode: "cors",
//        credentials: "include"
}).then((response: Response) => {

    console.log("response: ", JSON.stringify(response));

    const body = JSON.stringify(response.body);
    console.log("body: ",body);
    const statusCode = response.status;

    if (statusCode === 200) {
        console.log("status code: ", response.status);
        const XAUTHTOKEN = response.headers.get(X_AUTH_TOKEN);
        if (XAUTHTOKEN) {
            sessionStorage.setItem(AUTH_TOKEN, XAUTHTOKEN);
            return true;
        }
    }
    return false;
})

后端security配置

@Bean
CorsConfigurationSource corsConfigurationSource() {

    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.setAllowedOrigins(Arrays.asList("*"));
    corsConfiguration.setAllowedMethods(Arrays.asList("GET","POST"));
    corsConfiguration.setAllowedHeaders(Arrays.asList("*"));
    UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
    urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);
    return urlBasedCorsConfigurationSource;
}

你期待的结果是什么？实际看到的错误信息又是什么？

我是想在fetch函数里面拿到response后，从里面拿到spring 生成的token然后存起来，但是拿不到