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

标签 javascript node.js vue.js sequelize.js

我的应用程序是使用 Vue 和 Express 开发的。 我的应用程序中存在一个错误,该错误仅发生在 Heroku 或生产环境中,但不会发生在本地主机或开发环境中。
我的应用程序已开启
Heroku:https://immense-refuge-12167.herokuapp.com/
github:https://github.com/powerseed/tabtracker_production
如果点击左上角的“浏览器”链接,控制台上将打印一个名为“response”的对象,如下所示: enter image description here 它是从后端返回的响应,其 data 属性应该包含从 PostgresSQL 数据库返回的 song 对象。
但是,其 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 上,输出如下所示,这是正确的。 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. '
        })
    }
})

这很奇怪,因为它在本地主机上运行得很好,但在 Heroku 上却出现了这个错误。
我认为数据库连接正确,因为注册和登录功能工作正常。
您注册后才可以登录。它们都是 post 请求。所以我猜问题只出在 get 上?

此外,这是我的代理配置: 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,这与我的本地主机不同,即使我没有添加 'Content-Type',它始终是 application/json: '应用程序/json'

最佳答案

快速路由器出现问题。对于任何 GET 请求,您的后端(express)都会以首页内容进行响应。

尝试在浏览器中直接点击这些网址并观察行为:

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

我尝试过使用不存在的网址,该网址也解析为200 OK。应该是404 Not found

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

关于javascript - Get请求返回html代码而不是真实数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61569512/

相关文章:

javascript - 在没有任何参数的情况下在javascript中重新加载图像

javascript - 客户端和服务器的时间不一样,为什么?

javascript - 如何获取组件中当前的路由名称?

node.js - 我可以在为服务器提供 API 的同时提供静态文件吗?

vue.js - 是否可以配置 prettier 将脚本标记中的文本视为 HTML?

javascript - Div根据图像调整大小点击

javascript - Ajax 调用第二次不起作用

javascript - 使用 Google Sheets API 将图像插入 Google Sheets 单元格

node.js - Angularjs REST API交互失败

node.js - 无法连接到 Socket.io 错误 : xhr poll error