时间戳

首页 > 解决方案 > 获取请求返回 html 代码而不是真实数据

javascript - 获取请求返回 html 代码而不是真实数据

问题描述

我的应用程序是使用 Vue 和 Express 开发的。我的应用程序中有一个错误仅发生在 Heroku 或生产环境中，而不发生在 localhost 或开发环境中。
我的应用在
Heroku：https
://immense-refuge-12167.herokuapp.com/ github：https
://github.com/powerseed/tabtracker_production 如果单击左上角的“浏览器”链接，名为“response”的对象将打印在控制台上，如下所示： 在此处输入图像描述 它是从后端返回的响应，其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>

我想知道为什么......这个错误不会发生在本地主机上。在localhost上，输出如下图，是正确的。 这是我在客户端中将请求发送到后端以获取对象的代码。在此处输入图像描述
getsong

.
.
.
      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请求并从 DB 检索的方法是：

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. '
        })
    }
})

这很奇怪，因为它在本地主机上完美运行，但在 Heroku 上出现了这个错误。
我认为数据库连接正确，因为注册和登录功能工作正常。
您只有在注册后才能登录。他们都是post请求。所以我想问题只是关于get？

此外，这是我的proxy配置： client/config/index.js

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

提前致谢！

更新：
我尝试添加headers: {Accept: 'application/json'}and headers: {'Content-Type': 'application/json'}，但响应始终是，这与我的本地主机不同，即使我没有添加text/html它也总是如此application/json'Content-Type': 'application/json'

标签： javascriptnode.jsvue.jssequelize.js

解决方案

快速路由器有问题。对于任何GET请求，您的后端（快递）都会响应首页内容。

尝试在浏览器中直接点击这些 url 并观察行为：

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

我尝试过使用不存在的 url，它也被解析为200 OK. 应该是404 Not found。

https://immense-refuge-12167.herokuapp.com/songs/invalid/url/test?search=

推荐阅读