Я понял, как сделать запрос на SQL-сервер и опубликовать его в формате JSON на стороне сервера. Мне интересно, как я могу вытащить эти данные на сторону реагирования.
Сервер.js:
let pullTable = require('./actions/pullTable.js');
var express = require('express');
var app = express();
app.get('/', async (req, res, next) => {
try {
const result = await pullTable.pullTable();
return res.status(200).json(result);
} catch (error) {
next(error);
}
});
app.listen(5000, () => {console.info('Server is running..')});
SQL-запрос — pullTable.js:
var sql = require("mssql");
var express = require('express');
var app = express();
// config for your database
var config = {
user: 'user',
password: 'pass',
server: 'localhost',
database: 'Master'
};
const pullTable = async () => {
try {
const pool = await sql.connect(config);
const sqlQuery = 'SELECT * FROM Persons';
const result = await pool.request().query(sqlQuery);
return result.recordset;
} catch (err) {
throw err;
}
};
exports.pullTable = pullTable;
Код отлично работает до сих пор. Я смотрю на порт 5000 и вижу данные JSON, отображаемые с моего сервера. Просто не уверен, как получить это в React. Это моя попытка на стороне реагирования (не включая файл App.js - в этом не нужна помощь):
getData.js:
import React, { Component } from 'react';
class getData extends Component {
constructor(){
super();
this.state = {
data:[],
}
}
componentDidMount(){
fetch('http://localhost:5000')
.then((Response)=>Response.json())
.then((findresponse)=>
{
this.setState({
data:findresponse,
});
});
}
render() {
return (
<div>
{
this.state.data.map((dynamicData)=>
<div>
<span>{dynamicData.LastName} </span>
<span>{dynamicData.FirstName}</span>
</div>
)
}
</div>
);
}
}
export default getData;
Просто хочу отобразить имя и фамилию людей в этой таблице SQL.
Вы проверили, был ли запущен запрос на вкладке сети инструментов разработчика вашего браузера? Это был успешный или неудачный запрос? Возможны проблемы с CORS.
JSON хорош, потому что, когда я помещаю его в локальную папку на своем компьютере, он отлично читает его. Это ошибка, которую я получаю в консоли: «Доступ к выборке в« локальный: 5000 »из источника« локальный: 3000 »был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок« Access-Control-Allow-Origin ». Если непрозрачный ответ соответствует вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS». Похоже, это проблема CORS. Есть идеи, как это исправить? Спасибо!





@Шон Яп указал мне правильное направление. В основном нужно было включить заголовок Access-Control-Allow-Origin в сценарий сервера:
let pullTable = require('./actions/pullTable.js');
var express = require('express');
var app = express();
app.get('/', async (req, res, next) => {
try {
res.set('Access-Control-Allow-Origin', '*');
const result = await pullTable.pullTable();
return res.status(200).json(result);
} catch (error) {
next(error);
}
});
app.listen(5000, () => {console.info('Server is running..')});
Не уверен, что это даже хороший код, но он работает.
Что именно не работает? Вы видите ошибки? Предполагая, что данные, которые вы получаете с сервера, похожи на
[{ "Firstname": "John", "Lastname": "Doe" }, ... ], вы должны увидеть список записей из базы данных.