将 React 前端连接到网络时出现网络错误

Question

应用程序使用 next.js 连接到 express，然后连接到 AWS MySql。

我正在尝试最初加载一些我存储在我的数据库中的产品。但是，我收到以下网络错误：-

TypeError：尝试获取资源时出现 NetworkError。

我使用外部 api 对前端代码进行了故障排除，并且效果很好，所以它与 express 中间件有关。

请参阅下面的代码摘录...

index.js

import '../scss/style.scss';
import NavBar from '../components/Navbar/Navbar';
import fetch from 'isomorphic-unfetch';

const Index = (props) => (
    <div>

    <NavBar />
    <h1>See our products below yeah</h1>
    </div>
)

Index.getInitialProps = async function() {
    const res = await fetch('localhost:3000/');
    const data = await res.json();
    return {
        posts: data
    }
}

export default Index;

server.js

const express = require('express');
const next = require('next');

const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const db = require('../lib/db')
const escape = require('sql-template-strings')

app.prepare().then(() => {
  const server = express()


  server.get('/', (req, res, next) => {
      let sql = 'SELECT * FROM products'
      db.query(sql, [], (err, rows) => {
          if (err) {
              throw err;
          } else {
              return res.json({
                  data: rows
              })
          }
      })
  })
...

db.js

const mysql = require('serverless-mysql')

const db = mysql({
  config: {
    host: "XXX",
    database: "XXX",
    user: "XXX",
    password: "XXX"
  }
})

exports.query = async query => {
  try {
    const results = await db.query(query)
    await db.end()
    return results
  } catch (error) {
    return { error }
  }
}

Answer 1

每当你有来自不同服务器的 api 请求时，你都必须在前端和后端设置 CORS

链接：https://expressjs.com/en/resources/middleware/cors.html