带有凭据的 Axios 请求导致 MacOS Safari 或任何 iOS 浏览器中的网络错误

Posted 2023-02-22

【中文标题】带有凭据的 Axios 请求导致 MacOS Safari 或任何 iOS 浏览器中的网络错误

【英文标题】：Axios requests with credentials resulting in Network Error in MacOS Safari or any iOS browser

【发布时间】：2022-01-13 15:40:50

【问题描述】：

我正在尝试使用 Axios 从反应客户端向节点服务器发出 API 请求。该请求适用于 MacOS Chrome 浏览器，但不适用于 MacOs Safari 或 iOs Safari 和 iOS Chrome。

在相同的代码中，我对相同的 API（不同的端点）进行了其他调用，它在 safari 和 iO 中完全没有问题。

我 console.log 异常，我得到一个非常基本的网络错误，没有详细信息：

我的 axios 请求如下所示：

axios.defaults.withCredentials = true;

return axios.get(API_ENDPOINT + '/api/auth/user_data/' + user_id + '/')
        .then((response) => 

            if (response.data.email) 

              localStorage.setItem('user_id', response.data.id);

              this.setState(
                user_id: response.data.id,
              );
              return true;
             else 
              this.logout();
              return false;
            
        ).catch(error => 
          console.log(error);
          this.logout();
          return false;
        );

我的快速服务器 cors 设置如下所示：

const app = express();

var corsOptions = 
  credentials: true,
  origin: ["https://[production-domain.com]", "http://localhost:3000"]
;

app.use(cors(corsOptions));

如果我直接从浏览器点击 API，我会得到成功的响应：

我的本​​地主机环境（本地主机上的客户端：3000 上的客户端访问本地主机上的服务器：9090）和我的生产环境（生产域.com：5000 上的客户端访问生产域.com：9090 上的服务器）都发生错误/p>

对我来说，这排除了我只在生产中使用的网络服务器 (nginx) 的问题。

从我的服务器日志中，我可以看出请求正在到达服务器，因为它会在我的服务器端函数上为上述端点触发日志。错误在于响应永远不会被发送回反应客户端。

我的服务器端响应处理程序是：

    router.get('/user_data/:id', (req, res) => 

        console.log("User is authenticated on server: " + JSON.stringify(req.isAuthenticated()))

            if (!req.user) 
                // The user is not logged in, send back an empty object
                console.log("THE USER IS NOT LOGGED IN")
                res.json();
             else 
                console.log("The supplied user ID is: " + req.params.id);
                console.log("The stored user ID is: " + req.user.id);

                // Otherwise send back the user's email and id
                if(Number(req.params.id)===Number(req.user.id))
                    console.log("USER " + req.user.id + " IS LOGGED IN")
                    res.json(
                        email: req.user.email,
                        first_name: req.user.first_name,
                        id: req.user.id,
                    );
                 else 
                    console.log("Client side user ID does not match. Logging out.")
                    req.logout();
                    res.json();
                
            
    );

在我的服务器日志中我可以看到：

User is authenticated on server: true
The supplied user ID is: 35
The stored user ID is: 35
USER 35 IS LOGGED IN

我已尝试将调用从 GET 更改为 POST，但仍然无法正常工作。

非常坚持这一点，将不胜感激。

失败请求的标头是：

成功调用的标题是：

【问题讨论】：

“错误在于响应从未被发送回反应客户端。”那么这是否意味着您的错误出现在服务器端的响应处理程序中？发布您的响应处理程序。

添加了响应处理程序。它在我的 macbook 中的 Chrome 上运行良好，但在 Safari 上运行良好

【参考方案1】：

这个问题原来是服务器响应的竞争条件（我认为）。

我的 axios 调用位于我的 react 客户端中的一个函数内部，该函数同时被子类和组件加载调用，并导致我对该端点的 axios 请求被调用两次。我不能 100% 确定为什么这会导致响应失败，但要确保仅在解决问题后才调用它。

【讨论】：

仍然很奇怪，它只发生在 Safari 中！很高兴它得到了排序