如何在 React 中使用 axios 解决 get 请求？

Question

我是 Axios 的新手，我试图从端点获取数据以在 React 中使用...

import axios from "axios";

const api = axios.create({ baseURL: "http://localhost:5000/" });

export default function App() {
  api.get("/products").then(res => console.log(res.data));
  ...
}

这是我的端点代码...

const express = require("express");
const app = express();

require("dotenv").config();

app.get("/products", (req, res) => {
  res.send("Hello world!");
});

const port = process.env.PORT;
app.listen(port, () => console.log(`Listening on port ${port}...`));

但是我收到的不是 Hello world! 被记录的错误...

任何帮助将不胜感激。

Answer 1

嗨，为 express 寻找这个 lib Cors，您可以在 package.json 中的 react 项目中使用代理而不是 axios.create() 喜欢

"proxy": "http://localhost:5000"

Answer 2

在您的后端服务器中安装 cors 中间件。

1. npm install cors
2. 启用所有 CORS 请求

const express = require("express");
var cors = require('cors')
const app = express();

app.use(cors())

您可以查找更多信息here。还有一些方法可以配置您的 CORS。

对于您的另一个问题，应该在 useEffect 钩子中使用 CRUD 操作。

import React, { useEffect } from 'react';

export default function App() {

  useEffect(() => {

    api.get("/products").then(res => console.log(res.data));

  }, [])

  ...
}