Получать запросы возвращают html код вместо реальных данных - PullRequest
Новая
       18

Получать запросы возвращают html код вместо реальных данных

0 голосов
/ 03 мая 2020

Мое приложение разработано с использованием Vue и Express. В моем приложении есть ошибка, которая возникает только в Heroku или производственной среде, но не в localhost или в среде разработки.
Мое приложение включено
Heroku: https://immense-refuge-12167.herokuapp.com/
github: https://github.com/powerseed/tabtracker_production
Если вы нажмете ссылку "Браузер" вверху -в левом углу, объект с именем «response» будет напечатан на консоли, как показано ниже: enter image description here Это ответ, возвращенный из бэкэнда, и его атрибут data должен содержать song объекты, возвращаемые из базы данных PostgresSQL.
Однако его атрибут data содержит вместо этого код HTML, содержимое которого: 

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel=stylesheet>
  <title>TabTracker</title>
  <link href=/static/css/app.a56f85525b4e670fc7da4a6aaae97f55.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.eb5d49c013eada509bc8.js></script>
<script type=text/javascript src=/static/js/app.913b2b7edc7aedfb34fe.js></script></body></html>

Мне интересно, почему ... Эта ошибка не возникает на локальном хосте. На локальном хосте вывод такой, как показано ниже, и это правильно. enter image description here
Вот мой код в клиенте, который отправляет запрос get на сервер для получения song объектов. 

.
.
.
      async mounted() {
        const response = (await api.getSongs(this.search))
        this.songs = response.data;
        console.log({response})
        console.log(this.songs)

И метод api.getSongs() это:
(пожалуйста, игнорируйте параметр this.search, он игнорируется для тестирования) 

  const URL = "";

  getSongs(search){
    return axios.get(URL + "songs", {
      params:{
        search: search
      }
    });
  },

И в beckend метод, который обрабатывает запрос get и получает из БД: 

app.get("/songs", async function (req, res) {
    try{
        let allSongs = await Song.findAll({
            limit: 10
        })
        res.send(allSongs);
    }
    catch (e) {
        res.status(500).send({
            error: 'An error occurred when getting all songs. '
        })
    }
})

Это странно, так как отлично работает на localhost, но в Heroku эта ошибка возникает.
Я думаю, что БД подключена правильно, потому что функции реестра и входа работают нормально.
Вы можете войти в систему только после регистрации. И они оба post запрос. Итак, я думаю, что проблема только в get?

Кроме того, вот моя proxy конфигурация: client/config/index.js

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/': {
        target: 'http://localhost:8081',
      }
    },

Заранее спасибо!

Обновлено:
Я пытался добавить headers: {Accept: 'application/json'} и headers: {'Content-Type': 'application/json'}, но ответ всегда text/html, что отличается от моего локального хоста, где всегда application/json, даже если я не добавил 'Content-Type': 'application/json'

Ответы [ 2 ]

1 голос
/ 03 мая 2020

Что-то не так с express роутером. Для любого запроса GET ваш сервер (express) отвечает содержимым главной страницы.

Попробуйте напрямую нажать эти URL в браузере и наблюдайте за поведением: 

https://immense-refuge-12167.herokuapp.com/songs?search=
https://immense-refuge-12167.herokuapp.com/allBookmarks?userId=3

I пробовал с несуществующим URL, который также был разрешен как 200 OK. Это должно быть 404 Not found. 

https://immense-refuge-12167.herokuapp.com/songs/invalid/url/test?search=
0 голосов
/ 03 мая 2020

Вы пытались добавить заголовки подтверждения в приложение / json? 

return axios
  .get(URL + 'songs', {
    headers: { Accept: 'application/json' },
    params: { 
        search: search 
    },
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log('error ' + error);
  });
...