服務器未收到來自客戶端的 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 ）