反应不使用代理服务器

Question

我已在我的 react 应用程序中将代理添加到 package.json，代理服务器已启动并在端口 3001 上运行 - 我可以使用浏览器访问它。

我尝试过同时使用 axios 和 fetch，这似乎并不重要。如果您想查看，这里是link to the repo。

否则，这是我的 react 应用程序中的 package.json：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001/",
  "dependencies": {
    "axios": "^0.17.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我的超级简单服务器...

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const PORT = process.env.PORT || 3001;
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static("client/build"));

app.get("/data", function(req, res){
  res.send({someData: 1234});
});

app.listen(PORT, function() {
   console.log("????  ==> API Server now listening on PORT ${PORT}!");
});

在我的 App.js 中，我尝试在 componentDidMount 函数中调用 API。

componentDidMount(){
    fetch("/data").then((data) => console.log(data));
    axios.get('/data').then(data => console.log(data)); 
}

这两个 API 调用都返回 404，并且 url 为 http://localhost:3000/data

有什么想法吗？

Answer 1

这里没有足够的信息来正确诊断此问题，但我会尝试一下。不过，我将不得不做出一些假设。

首先，您链接到的代码存储库不是您的完整项目。我的猜测是您正在尝试将此 node.js 服务器作为 API 服务器运行，并且您还有其他东西在为您的网页和相关资产提供服务。为什么我会这样想？因为您的代码存储库不包含任何可以为/client/public 目录中的index.html 文件提供服务的内容。

我认为您的环境如下所示：

• 您的 node.js 服务器正在运行并侦听端口 3001
• 您的 HTTP 服务器正在运行并侦听端口 3000

这就是正在发生的事情：

1. 您向http://localhost:3000/ 发出请求，它会为您提供index.html 文件以及您的Javascript、CSS 和其他资产。

2. 您的 React 组件向 /data 发出 GET 请求。由于您没有指定完整的 URL，浏览器必须猜测您的意思。在这种情况下，它会猜测您正在访问它请求页面的同一主机上的路径，即http://localhost:3000。因此它向http://localhost:3000/data 发出GET 请求。请记住，您的 API 实际上正在侦听 http://localhost:3001/data。

3. 您的 HTTP 服务器在该路径上没有任何内容，因此它返回 404 错误

解决方案？在这种环境中，当您在 Javascript 中发出 GET 请求时，不要使用相对路径。使用完整的 URL。