Question

我正在尝试制作一个非常基本的全堆栈应用程序，其中前端是Gatsby，后端是简单的Express服务器。我有一个数据库，其中有一些用户，目标是通过查询使这些用户进入后端，然后使用fetch（）将其显示在Gatsby（反应）组件中。显然出了点问题，即使使用Postman，请求也得到了正确处理，我也无法在屏幕上显示它们。以下是相关的代码段：

Express：我使用了经典的express-generator，并且只更改了路由文件users.js，以将其链接到数据库。（由于Gatsby使用端口8000，因此无需更改端口，以便React和Express不会重叠）。

var express = require('express');
var router = express.Router();
const mysql = require('mysql');

var mysqlconnection = mysql.createConnection({
  host     : ****,
  user     : ****,
  password : ****,
  database : ****
});

mysqlconnection.connect(function(err) {
  if (err) {
  console.log(err)
  }
  else {
  console.log(`You are now connected` )
  }
})

router.get('/', (req, res) => {
  mysqlconnection.query('SELECT * FROM table_basic', (err, rows, fields) => {
      if(!err) {
          res.send(JSON.stringify(rows, undefined, 2));
      }
      else {
          console.log(err)
      }        
  })
})



module.exports = router;

Gatsby页面：这不是主要的index.js文件，它是页面文件夹中编码为contacts.js的辅助页面（Gatsby使用内置路由方法）。该组件包装在布局周围（页脚和页眉，就像hbs局部文件一样工作）。

import React, { Component } from 'react';
import './contacts.css';
import Layout from '../components/layout';

export default class About extends Component {
    constructor(props) {
        super(props)

        this.state = {
            users: []
        }
    }


    componentDidMount() {
        fetch('/users')
          .then(res => res.json())
          .then(users => this.setState({ users }));
      }



  render() {
    return (
        <Layout>
            <h1>LISTING</h1>
            <ul>
              {this.state.users.map(user =>
                <li key={user.id}>{user.lastname}</li> 
                )}
            </ul>         
        </Layout>      
    )   
  }
}

最后，为了将后端与前端链接，我在Gatsby package.json中添加了"proxy": "http://localhost:3000",以指向Express服务器。无论使用Postman还是在我尝试获取数据的任何地方，一切都可以正常工作，但它们不会显示在屏幕上。有任何想法吗？

Answer 1

在开发中，您需要像其他人所说的那样，将代理中间件添加到gatsby-config.js中。生产中将完全取决于您在哪里运行/托管Gatsby项目。您的项目是自托管的吗？这取决于您正在运行的HTTP Web服务器。以Nginx为例：您需要打开Nginx配置文件并创建一个块，该块允许调用在端口3000（http://nginx.org/en/docs/beginners_guide.html）上找到您的快速服务器

location /api {
proxy_set_header 'Access-Control-Allow-Origin' 'http://xxx.xxx';
proxy_set_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
proxy_set_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type,Origin';

proxy_pass http://127.0.0.1:3000;
proxy_redirect off;
proxy_buffering on;

proxy_set_header    Host                        $host;
proxy_set_header    X-Real-IP               $remote_addr;
proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header    origin                  `http://xxx.xxx';}

此示例来自https://www.rodrigoplp.com/blog/using-your-own-server-with-gatsby

Answer 2

将此添加到您的Gatsby配置文件中

module.exports = {
  proxy: {
    prefix: "/users",
    url: "http://localhost:3000",
  },
}

这样，当您在开发中获取（'/ users / todos'）时，服务器将识别出它不是静态资产，并进行代理您对http://localhost:3000/users/todos的请求作为后备。

Answer 3

我遇到了完全相同的问题，并按照GatsbyJS网站上“高级代理”下的建议解决了该问题：

https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying

我建议您将 gatsby-config.js 文件（不是 package.json）修改为以下内容：

var proxy = require("http-proxy-middleware")

module.exports = {
  developMiddleware: app => {
    app.use(
      proxy({
        target: "http://localhost:3000",
      })
    )
  },
}

您可能需要创建gatsby-config.js文件。您可能还需要从package.json文件中删除“代理”行。

如何将Gatsby.js与我的Express服务器链接

3 个答案: