Я относительно новичок в развитии себя. Я пытаюсь запустить сайт, который сделал в свободное время. В настоящее время это что-то относительно простое. Проблема в том, что, хотя я могу развернуть страницу, она не будет прокси-сервером для моей серверной части, которая использует express. (Node.js). Как упоминалось в названии, я использую React на своем интерфейсе. Раньше при создании проектов я просто помещал прокси в файл json для моего http://localhost: 3001 и называл это днем. Но на этот раз это вызвало проблему с неверным заголовком хоста. Поэтому я использовал пакет http-proxy-middleware, как описано на странице приложения create response, https://create-react-app.dev/docs/proxying-api-requests-in-development, используя приведенный ниже код в файле setupProxy. js:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:3001',
changeOrigin: true,
})
);
};
Нет кубиков, все равно не работает. Когда любой маршрут, являющийся серверной частью, получает вызов, «Произошла ошибка при попытке прокси на: bulletboardnews.herokuapp.com/api/currentnews», и это имеет ту же ошибку для любого маршрута api.
Я действительно использовал шаблон redux, когда я начал этот проект, потому что в конечном итоге я тоже хочу это изучить, поэтому я не знаю, изменило ли это что-нибудь по сравнению с обычным приложением create-response-app.
Вот что JSON выглядит внутри реакционной папки (клиента).
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@popperjs/core": "^2.4.0",
"@reduxjs/toolkit": "^1.3.6",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"http-proxy-middleware": "^1.0.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"reactstrap": "^8.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Все это будет работать локально. Но после развертывания этого не произойдет. Это страница, о которой идет речь: https://bulletboardnews.herokuapp.com/. На данный момент он работает, но опять же, маршруты api не работают, и sh сайт сейчас легко взломать.
Я потратил 5-6 часов на чтение, глядя на другие форумов, но я просто не понимаю, как исправить эту конкретную проблему, и надеюсь получить некоторую помощь.