在没有 CRA（create-react-app）的情况下从 react 获取错误到 express

Question

import React,{Component} from 'react';
import '../styles/App.css';

class App extends Component{
  constructor() {
    super();
    this.state = {
      products: []
    };
  }
  componentDidMount() {
    fetch('http://localhost:4000/products', {
      method: 'GET',
      mode: "no-cors",
      headers: {"Content-Type": "application/json"}
    }).then(res => {console.log(res);res.json()})
      .then(products => this.setState({products}));
  }

  render() {
    return (
      <div>
        <h1>Hello, react.js!!!</h1>
        <ul>
        {this.state.products.map(product => <li>{product.product_name}</li>)}
        </ul>
      </div>
    );
  }
}

export default App;

express.js 监听端口 4000。这express.js部分

app.get("/products", (req, res) => {
    conn.query('SELECT * FROM products', (err, result) => {
        if(err) {throw err;}
        console.log(result);

        res.json(result);
    });
});

如果我只是在地址栏中输入 http://localhost:4000/products，那么我会得到 json 响应，但是在组件应用程序 react.JS fetch returns 中会出错，因为响应包含一个空主体，这意味着该地址不可用。此错误与CORS有关，但我不知道如何解决。

也许如果您知道如何为此使用和配置代理，那么我将不胜感激。

App.js 使用 fetch 访问 express

这里是错误日志，是因为request中的body为null，也就是response是空的body

Answer 1

发生的情况是您的代码没有等待调用完成。

您可以使用 async-await 功能。
这 link 可能会有所帮助：https://www.valentinog.com/blog/await-react/

正在编辑和添加示例，因为 OP 无法达到 link。
试试这个：

  async componentDidMount() {
const response = await fetch('http://localhost:4000/products', {
      method: 'GET',
      mode: "no-cors",
      headers: {"Content-Type": "application/json"}
    });
    const json = await response.json();
    // Do stuff with json
    console.log(json);
    this.setState(json);
  }

如此简单也可能有效，但请检查：

  async componentDidMount() {
    await fetch('http://localhost:4000/products', {
      method: 'GET',
      mode: "no-cors",
      headers: {"Content-Type": "application/json"}
    }).then(res => {console.log(res);res.json()})
      .then(products => this.setState({products}));
  }

您是否也在您的 express 项目中启用了 CORS？

Answer 2

你不需要this.componentDidMount();。删除该行。它将作为 React 组件生命周期的一部分自动执行。

在没有 CRA（create-react-app）的情况下从 react 获取错误到 express

Error fetch from react to express without CRA(create-react-app)

javascript

http-proxy

node.js

express

reactjs