Axios 获取请求在 cPanel 托管的 React + Node.js Web 应用程序上不起作用

Question

我有一个 React + Express 应用程序，可以在本地主机上正常获取数据。 在公共领域，React 应用程序加载，但它在我的获取请求上抛出此错误“无法加载资源：net::ERR_CONNECTION_REFUSED”。

我也不知道这是否相关，但是当Axios请求URL中没有输入端口号或端口号443时，屏幕是空白的，但是当我输入80或8080时，站点会加载。

我的后端和前端位于同一个 URL 上，这也可能是问题所在，尽管我已经看到两者可能位于同一个 URL 上。

请帮忙，因为我不确定我的代码或 Node.js 应用程序的 cPanel 设置中是否搞砸了。

我尝试通过 Postman 进行测试，它返回我的 React 应用程序的 HTML，而不是数据库中的数据。

我还尝试在应用程序设置中降级 Node.js 版本，但它不起作用。

Answer 1

听起来有两个问题。

1. 您的 API 测试应该返回数据，而不是网页。检查配置以确保到domain.com/your-api-name的流量实际上路由到运行nodejs的端口。

2. 连接被拒绝错误可能是 CORS 问题。尝试将以下代码添加到您的 index.js 文件中 app.use() 上方。

   const cors = require("cors"); 应用程序.use(cors());

然后，在 app.use() 方法中包含以下内容：

app.use((req, res, next) => {
  const allowedOrigins = [
    
    "http://your-domain-name.com",
  ];
  const origin = req.headers.origin;

  allowedOrigins.includes(origin) &&
    res.setHeader("Access-Control-Allow-Origin", origin);

  // Request methods you wish to allow
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");

  // Request headers you wish to allow
  res.setHeader("Access-Control-Allow-Headers", "content-type");

  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader("Access-Control-Allow-Credentials", true);

  // Pass to next layer of middleware
  next();
});

这允许从您的 api、您的域名发出请求。