404 (не найдено) при попытке отправить информацию по почте на heroku

Question

У меня есть приложение React с серверной частью express. Я пытаюсь выполнить выборку из внешнего интерфейса в серверную часть. Эта выборка представляет собой логин, в который я передаю различные учетные данные, проверяя свой clearDB, чтобы узнать, является ли пользователь законным или нет. По какой-то причине я получаю сообщение 404, которое не найдено. Хорошая новость заключается в том, что 404 означает, что мой бэкэнд и фронтенд хорошо взаимодействуют, но плохая новость заключается в том, что он не может получить доступ к маршруту должным образом. Я предоставил здесь несколько файлов. Сообщите мне, если вам понадобятся дополнительные файлы. Как всегда, я ценю вашу поддержку и с нетерпением жду этого обсуждения.

Структура папки:

DemoApp
  >bin
  >classes
  >client
    ->build
    ->node_modules
    ->public
    ->public
    ->src
    ->package.json
    ->static.json
  >Design
  >node_modules
  >public
  >routes
    ->api.js
  >views
  app.js
  package.json

Журналы консоли:

Login.js:69 POST https://<hostname>.herokuapp.com/api/login 404 (Not Found)

app. js (NodeJS backend) :

...
const corsOptions = {
   origin: 'http://localhost:3000',
   credentials: true
}
app.use(cors(corsOptions))

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

app.get('*', function(request, response) {
    response.sendFile(path.join(__dirname, '/client/build', 'index.html'));
});

пакет. json (находится в папке клиента):

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "email-validator": "^2.0.4",
    "owasp-password-strength-test": "^1.3.0",
    "password-validator": "^5.0.3",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-dropdown": "^1.7.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "semantic-ui-react": "^0.88.2"
  },
  "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"
    ]
  }
}

stati c. json

{
  "root": "build/",
   "routes": {
    "/assets/*": "/assets/",
    "/**": "index.html"
  }
}

Вход. js (компонент REACT):

const url = '/api/login'

fetch(url, {
 method: 'POST',
 credentials: 'include',
 headers: {
     'Content-Type': 'application/json'
 },
 body: JSON.stringify(user)
 })

api. js (NodeJS внутренний маршрут)

   .
   .
   .

    var connection = mysql.createPool('mysql://<username>:<password>@<host>/<database name>?reconnect=true')
    router.post('/login', function(req,response,next) {
        const query1 = "SELECT * FROM users WHERE username = TRIM(?)"
        connection.query(query1, [req.body.username], function(err, result) {
            if (err) {
                response.json({'message': 'Incorrect Username/Password', 'status': 0})
            } else {
                req.session.username = req.body.username
                response.json({'message': 'You have successfully logged in', 'status': 1})
            }
        })
    })

Answer 1

, если вы объявляете маршрутизатор в другом файле, отличном от app. js, вы должны указать своему приложению использовать этот маршрутизатор.

Итак, если у вас есть такой файл, как loginRouter. js, с чем-то вроде:

const router = new express.Router();

router.get('/api/login', auth, (req, res) => {
    try {
        res.send(<whatever>);
    } catch (e) {
        res.status(500).send(e);
    }
});

module.exports = router;

Затем в app. js вы должны импортировать его

const loginRouter = require('./routers/login');

и применить к приложению. js с помощью .use метод следующим образом:

app.use(loginRouter);

Надеюсь, это единственная причина, по которой вы не можете получить доступ к этой конечной точке из своего внешнего интерфейса!

Answer 2

Чтобы позволить React Front end взаимодействовать с Express backend, мне пришлось настроить Proxy. Я открыл пакет React. json и добавил строку «прокси» следующим образом:

{
  "name": "bible-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:9000",
. 
.
.
}

Порт (9000) в строке «прокси» должен соответствовать порту вашего сервера Express. работает на. Таким образом, каждый раз, когда приложение React делает запрос к чему-то, что не является активом stati c (в основном, не изображением, CSS или index. html), оно перенаправляет запрос на сервер, указанный в «прокси». .

Источник: https://daveceddia.com/create-react-app-express-backend/