Question

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

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

否则，这是我的反应应用程序中的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和http://localhost:3000/data

的网址

有什么想法吗？

Answer 1

这里没有足够的信息来正确诊断这一点，但我会对它进行一次尝试。不过，我不得不做出一些假设。

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

所以，我认为你的环境是这样的：

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

以及发生了什么：

您向http://localhost:3000/发出了一个请求，该请求会为您提供index.html文件以及您的Javascript，CSS和其他资源。
您的React组件向/data发出GET请求。由于您尚未指定完整的网址，因此浏览器必须猜测您的意思。在这种情况下，它会猜测您正在访问它请求页面的同一主机上的路径，即http://localhost:3000。所以它向http://localhost:3000/data发出GET请求。请注意，您的API实际上正在监听http://localhost:3001/data。
您的HTTP服务器在该路径上没有任何内容，因此会返回404错误

解决方案？在此环境中，当您在Javascript中进行GET请求时，请不要使用相对路径。使用完整的网址。

反应不使用代理服务器

1 个答案: