服务器未收到来自客户端的 HTTP 请求

Question

首先，我认为可能会有帮助的快速序言：我不熟悉将客户端和服务器拆分为单独的 web 应用程序。 我以前的应用程序都在我的目录的根级别上有我的 server.js，在 /client 文件夹中有客户端（通常是 create-react-app）。

我想做的是：在 web 上托管一个 express.js 服务器，多个其他 web 应用程序可以向其发出请求。

我使用快速服务器和 aws elastic beanstalk 完成了第一部分。

服务器.js

require('dotenv').config()
const express = require('express');
const app = express();
const cors = require('cors');
const PORT = process.env.PORT || 5000;
const Mongoose = require('mongoose');
const { Sequelize } = require("sequelize");

//ROUTES
const APIUser = require('./routes/api/mongo/api-user');
more routes...

//INITIATE DATA MAPPING CONNECTIONS START
Mongoose.connect(
    process.env.MONGO_URI,
    { useNewUrlParser: true, useUnifiedTopology: true },
    console.log("connected to MongoDB")
);

const Postgres = new Sequelize(process.env.PG_CONN_STRING);

try {
    Postgres.authenticate()
        .then(console.log("connected to Postgres"));
} catch {
    console.log("Postgres connection failed")
}
//INITIATE DATA MAPPING CONNECTIONS END

//middleware
app.use(cors())
more middleware...

//home route
app.get('/api', (req, res) => {
    console.log('RECEIVED REQ to [production]/api/')
    res.status(200).send('models api home').end();
})

//all other routes
app.use('/api/user', APIUser);
more route definitions...

//launch
app.listen(PORT, () => console.log(`listening on port ${PORT}`));

在 aws 上成功启动的日志文件： https://imgur.com/vLgdaxK

乍一看它似乎有效，因为我的 postman 请求有效。 具有适当响应的状态 200： https://imgur.com/VH4eHzH

接下来，我在 localhost 中从我的一个实际客户那里测试了这个。 这是我的 React 客户端的 api util 文件之一，其中对后端进行了 axios 次调用：

import { PROXY_URL } from '../../config';
import { axiosInstance } from '../util';

const axiosProxy = axios.create({baseURL: PROXY_URL}); //this was the most reliable way I found to proxy requests to the server

export const setAuthToken = () => {
    const route = "/api/authorization/new-token";
    console.log("SENDING REQ TO: " + PROXY_URL + route)

    return axiosProxy.post(route)
}

export const authorize = clientsecret => {
    const route = "/api/authorization/authorize-survey-analytics-client";
    console.log("SENDING REQ TO: " + PROXY_URL + route)
    
    return axiosProxy.post(route, { clientsecret })
}

它又一次起作用了……或者更确切地说，我最终让它起作用了： https://imgur.com/c2rPuoc

所以我认为现在一切都很好，但是当我尝试使用客户端的实时版本时，请求在某处失败了。

总而言之，当从 postman 或本地主机发出请求时，实时 api 工作，但当从实时客户端发出请求时不响应https://imgur.com/kOk2RWf

我已经确认从实时客户端发出的请求不会到达实时服务器（通过从实时客户端发出请求然后检查 aws live 服务器日志）。

我没有收到任何 Cors 或跨源访问错误，并且从实时客户端到实时服务器的请求不会抛出任何大错误，我最终得到了 a.net::ERR_CONNECTION_TIMED_OUT。 有什么我可以寻找问题的想法，或者我可以分享更多代码吗？

谢谢！

Answer 1

在您的客户端应用程序中添加一个console.log(PROXY_URL)并检查您的浏览器控制台是否已正确记录。

如果它适用于您的本地客户端构建，并通过 POSTMAN，那么您的后端 api 可能是好的。 我高度怀疑你的环境变量没有被设置。 如果PROXY_URL是一个空字符串，您的axios请求将被路由回您的客户端的来源。 但我认为它们有不同的起源，因为你提到它们是独立的应用程序。

请记住，环境变量需要以REACT_APP_为前缀，并且在生产构建中，它们必须在构建时可用（无论您在何处执行npm run build ）