Я хочу настроить свои ответные JS с бэкэндом с помощью реакционных маршрутов.Но я заметил, что я получаю сырой json после запроса API, который, я полагаю, может быть очень небезопасным.
Один человек написал здесь, что:
"Если ваш пользователь переходит к маршруту серверакоторый обслуживает RAW JSON, браузер получит JSON и отобразит его без каких-либо шаблонов, стилей или других элементов страницы. Поэтому URL-адреса вашего сервера и клиентские URL-адреса должны отличаться, и ваш сервер должен использовать исключительно URL-адресаидентифицированные как URL-адреса API. Многие люди добавляют / api / к этим URL-адресам, чтобы избежать путаницы, или защищают их, чтобы клиенты не могли запрашивать их напрямую. "
Итак, мой путь" / "- localhost: 3000,он отображает компонент «Home», который имеет компоненты Users и About на localhost: 3000 / users и localhost: 3000 / about.Из каждого из этих вложенных компонентов я делаю запрос на выборку «api / users» и «api / about» соответственно его советам.Все работает нормально, но если я наберу localhost: 3000 / api / about , браузер отобразит необработанные данные json.Итак, как я могу иметь разные серверные URL и клиентские URL без этой проблемы?
Index.js
render() {
console.log(this.state);
return(
<div id="user">
<Router>
<ul>
<li>
<Link to="/about/">About</Link>
</li>
<li>
<Link to="/users/">Users</Link>
</li>
<li>
<Link to="/">Home</Link>
</li>
</ul>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about/" component={About} />
<Route path="/users/" component={Users} />
</Switch>
</Router>
</div>
);
}
About.js
componentDidMount() {
fetch('/api/about')
.then(res => {
console.log(res);
return res.json();
})
.then(msg => {
console.log(msg);
this.setState({msg}, () => console.log('React fetch: successful'))
});
}
сервер.JS
const dir = path.join(__dirname, '../build');
app.use(express.static(dir));
app.get('/api/about', function(req, res) {
const list = [{
"id": 1,
"name": "Pizza",
"price": "10",
"quantity": "7"
},
{
"id": 2,
"name": "Cerveja",
"price": "12",
"quantity": "5"
}
];
return res.json(list);
});
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, '../build', 'index.html'));
});