Блог

Я пытаюсь установить первоначальное соединение между моим node js с серверной частью веб-сервера apache2 и моим интерфейсом React. Я новичок во всем этом и пытаюсь заставить его работать на локальном компьютере перед развертыванием. Я прочитал о CORS и решил проблему с заголовками access origin с его помощью, но я не могу понять, чего мне здесь не хватает.

сервер запускается и прослушивает порт 3000, интерфейс на порту 3001

мой внешний код:

 import React from 'react';
import axios from 'axios';

import logo from './logo.svg';
import './App.css';

export default class App extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
      axios.get(`/ping`, {
          headers: {
              "Access-Control-Allow-Origin": "*"
          }
      })
          .then(res => {

              const persons = res.data;
              this.setState({ persons });
          })
  }

  render() {
    return (
        <h1>dfdfdfdfdf{this.state.persons}</h1>
    )
  }
}
  

И мой внутренний код:

 var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var cors = require('cors');
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(cors());
app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

const hostname = '127.0.0.1';
const port = 3000;

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

app.use(express.static(path.join(__dirname, 'build')))

app.get('/ping', (req, res) => {
  return res.send('pong')
})

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'))
})

app.listen(port, hostname, () => {
 console.log(`Server running at http://${hostname}:${port}/`);
});

module.exports = app;
  

Я продолжаю получать ошибки:

Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден) 0.chunk.js: 779 Отклонение необработанного обещания: Ошибка: Запрос не выполнен с кодом состояния 404 (анонимная функция) (0.chunk.js: 779) promiseReactionJob