该应用程序使用连接到express的next.js,而express又连接到AWS MySql。
我正在尝试首先加载我存储在数据库中的一些产品。但是,我收到以下网络错误:-
类型错误:尝试获取资源时出现网络错误。
我使用外部 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;
服务器.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 }
}
}
最佳答案
每当您有来自不同服务器的 api 请求时,您都必须在前端和后端设置 CORS
关于javascript - 连接 React 前端时出现网络错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58842725/