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

Posted 2023-02-27

【中文标题】由于预检而获取答案为空？

【英文标题】：Fetch answer empty due to the preflight?

【发布时间】：2016-05-16 09:31:00

【问题描述】：

我有一个 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")里面什么都没有 有什么问题吗？

【问题讨论】：

您是否知道在日志之后您正在从 then() 处理程序返回？

【参考方案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?

【讨论】：

在我的解决方案中，我只是更改了库。我将有机会再做一次，我会试试你的。

感谢艾瑞斯！我们中的一些人比阅读文档更依赖 SO：P