6

我有一个 webapp react.js / redux / webpackt / es6 ... 和一个与大猩猩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") 有什么不对吗？

4

1 回答 1

11

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

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

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

有关为什么需要此标头的更多信息，请参阅为什么需要 Access-Control-Expose-Headers？

于 2016-04-11T10:12:03.123 回答