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

Question

我正在尝试使用 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，但仍然无法正常工作。

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

失败请求的标头是：

成功调用的标题是：

Answer 1

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

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