对本地主机的调用不适用于 ReactJS/Axios/Express

Posted 2023-03-07

【中文标题】对本地主机的调用不适用于 ReactJS/Axios/Express

【英文标题】：Calls to local host not working with ReactJS/Axios/Express

【发布时间】：2020-06-18 12:55:27

【问题描述】：

我正在尝试使用 ReactJS 作为前端，使用 ExpressJS 作为后端来构建一个全栈应用程序。我使用 Axios 从前端调用后端。当我拨打这些电话时，我会收到以下错误：

我的快递索引文件：

const express = require('express')
const path = require('path')

var app = express()

const PORT = process.env.PORT || 5000

app.listen(PORT, () => 
  console.log(`Server started on port $PORT`)
)

app.use(express.static(path.join(__dirname, "public")))

我收到来自 React 前端的电话：

componentDidMount() 
  axios.get("http://localhost:5000/servers.json").then((res => 
    this.setState( servers: res.data )
  ))

React 服务器在 3000 端口上运行，Express 服务器在 5000 端口上运行，所以那里不应该有冲突...

【问题讨论】：

你能显示后端路由文件吗？

@ShmiliBreuer 公用文件夹仅包含 servers.json 文件。当我转到 localhost:5000/servers.json

时它会加载

请用错误更新问题

@Maroshii 抱歉，我以为我做到了。刚刚更新！

【参考方案1】：

这看起来像是一个基本的 cors 问题。将this cors middleware 添加到您的快递服务器。这是解决这个问题的最先进的解决方案。

const express = require('express')
const path = require('path')
var cors = require('cors')

var app = express()

app.use(cors())

const PORT = process.env.PORT || 5000

app.listen(PORT, () => 
  console.log(`Server started on port $PORT`)
)

app.use(express.static(path.join(__dirname, "public")))

如果您对 cors 感兴趣，请查看wikipedia page。

【参考方案2】：

您收到错误 http://localhost:3000 is not allowed by Access-Control-Allow-Origin 的原因是因为same origin policy，这是一种限制您的反应脚本访问/与您的服务器通信，因为它们来自不同的来源。请注意，要被视为具有同源的文档或脚本，它们需要具有相同的协议（例如http / https）， 主机名（例如 localhost / www.my-server.com）和 端口。在您的情况下，react 脚本在端口 3000 上运行，而 express 脚本在端口 5000 上运行，因此出现错误。

要解决这个问题，您需要在服务器端代码上启用CORS - Cross Origin Resource Sharing。首先使用命令安装cors依赖

npm install cors

然后更新服务器中的代码，如下所示：

const express = require('express')
const path = require('path')
const cors = require('cors')

const app = express()

app.use(cors())

const PORT = process.env.PORT || 5000

app.listen(PORT, () => 
  console.log(`Server started on port $PORT`)
)

app.use(express.static(path.join(__dirname, "public")))

希望这对你有用。