由于预检而获取答案为空？

Question

我有一个 webapp react.js / redux / webpackt / es6... 和一个与 gorilla 的 mux 配合使用的 api。
当我使用标题下方的函数进行调用时，我的标题也是空的并且内容也是如此。

我在我的 webapp 中使用这个包来拨打电话

"isomorphic-fetch": "^2.2.1",

我的通话示例

export function Login(userData) {
  return dispatch => {
    fetch(API + '/login', {
      method: 'post',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: userData.email,
        password: userData.password,
      }),
    })
    .then(response => {
      console.log(response);
      console.log(response.statusText);
      console.log(response.status);
      console.log(response.headers);
      console.log(response.headers.get("Authorization"));
      console.log(response.json());
      return response.json()
      if (response.status >= 200 && response.status < 300) {
        console.log(response);
        dispatch(LoginSuccess(response));
      } else {
        const error = new Error(response.statusText);
        error.response = response;
        dispatch(LoginError(error));
        throw error;
      }
    }).then(function(json) {
      console.log('parsed json' + json)
    })
    .catch(error => { console.log('request failed', error); });
  }

一开始我遇到了 cors How to handle preflight CORS requests on a Go server 的问题，我使用了这个解决方案

我们可以查看控制台内部的调用：

login   OPTIONS   200   fetch   auths.actions.js:38 352 B   1 ms    
login   POST      200   json    Other   567 B   82 ms

当我查看我的 POST Header 响应时，我有：

HTTP/1.1 200 OK
Access-Control-Allow-Headers: Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Origin: http://localhost:3000
Authorization: Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE0NTQ3NTcxNjEsInVzZXJfaWQiOiI1NmI1YjZlOTFhZTMzYjAwMDFhYmE1MTQifQ.WGoTMxm6OuN24Olwr93J3pND9dFLCtG5MyiRbqLWeD244JtDzq0bGgQMixeZxyuxwGK3u8KhyWD7Rr6iZAGNpA
Content-Type: application/json
Date: Sat, 06 Feb 2016 11:12:41 GMT
Content-Length: 2

所以响应处理的是我的预检信息而不是我的 POST 吗？因为response.headers和response.headers.get("Authorization")里面什么都没有 有什么问题吗？

Answer 1

我遇到的问题是我的标头已发送、正确接收（chrome 的网络选项卡正确显示了所有已发送的标头），但我无法在 js 中访问它们（response.headers 为空）。正如Fetch get request returns empty headers 中描述的那样，发生这种情况是因为服务器没有设置Access-Control-Expose-Headers 标头，导致所需的标头没有暴露给js。 所以解决方案是在服务器上添加这个头文件，瞧，现在这些头文件可以在 js 中访问：

Access-Control-Expose-Headers: <header-name>, <header-name>, ...

标头采用逗号分隔的标头名称列表，以向浏览器公开。

有关为何需要此标头的更多信息，请参阅Why is Access-Control-Expose-Headers needed?