为什么我不能在 React 中使用 fetch 从 localhost:3000 调用 localhost localhost:5000？

Question

我在 localhost:3000 上的 React 应用程序运行并且在我的代码中使用 fetch to localhost:5000/users.

发出 GET 请求

const [users, setUsers] = useState([]);

useEffect(() => {
  fetch('http://localhost:5000/users')
    .then(res => res.json())
    .then(data => setUsers(data))
}, []);

但是我收到一个名为

的错误

Access to fetch at 'http://localhost:5000/users' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

CORS问题，尝试用这种方式

fetch('http://localhost:5000/users', { mode: 'no-cors' })

Answer 2

这是一个被广泛讨论的问题。按照以下步骤操作：

如果您的后端使用 nodejs 或 express js。在您的 Express 应用中安装 cors 包。

npm install cors

并且，在您的 index.js 文件中包含以下内容。

var cors = require('cors')

app.use(cors())

就是这样。它现在应该工作了。不要忘记重新启动节点服务器。

要更好地理解它，请阅读此 article。

为什么我不能在 React 中使用 fetch 从 localhost:3000 调用 localhost localhost:5000？

Why can't I call localhost localhost:5000 from localhost:3000 using fetch in react?

express

reactjs

mern