Javascript Get请求返回html代码而不是实际数据_Javascript_Node.js_Vue.js_Sequelize.js

Javascript Get请求返回html代码而不是实际数据

javascript node.js vue.js sequelize.js

Javascript Get请求返回html代码而不是实际数据,javascript,node.js,vue.js,sequelize.js,Javascript,Node.js,Vue.js,Sequelize.js,我的应用程序是使用Vue和Express开发的。我的应用程序中有一个bug，它只发生在Heroku或生产环境中，而不发生在localhost或开发环境中。我的应用程序正在运行希罗库： github：如果单击左上角的“浏览器”链接，控制台上将打印一个名为“响应”的对象，如下所示：它是从后端返回的响应，其data属性应该包含从PostgresSQL数据库返回的song对象。但是，其data属性包含HTML代码，其内容为： <!DOCTYPE html> <ht

我的应用程序是使用Vue和Express开发的。我的应用程序中有一个bug，它只发生在Heroku或生产环境中，而不发生在localhost或开发环境中。
我的应用程序正在运行
希罗库：
github：
如果单击左上角的“浏览器”链接，控制台上将打印一个名为“响应”的对象，如下所示：它是从后端返回的响应，其

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>

而

api.getSongs（）

方法是：
（请忽略

this.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

request。所以我想问题只在于

get

此外，这里是我的

代理

配置：

client/config/index.js

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

提前谢谢

更新：

我尝试添加

标题：{Accept:'application/json'}

和

标题：{'Content-Type'：'application/json'}

，但响应总是

text/html

，这与我的本地主机不同，其中总是

application/json

，即使我没有添加

“Content-Type”：“application/json”

express router出了问题。对于任何

GET

请求，您的后端（express）会以首页内容进行响应

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

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

我尝试过使用不存在的url，它也解析为

200ok

。它应该是

404未找到

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

您是否尝试将accept头添加到application/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);
  });

尝试添加

标题：{'content-type'：'application/json'}

您能告诉我在哪里添加它吗？我刚开始学习前端@upogAxios在其配置对象中使用headers键。你可以把它加在那里。看起来像这样：

标题：{'Content-Type'：'application/json'}

我很好奇

数据

键中的HTML是什么。您是否尝试将其复制粘贴到html文件中并在浏览器中呈现？这可能是作为返回的错误HTML@DanFletcher我更新了这篇文章来添加html代码，请看一看。我试过了，但似乎没有什么不同。。。你能给我更多的提示吗plz？为此，我需要你的输入文件（app.js或index.js）按顺序设置路由。尝试添加一些记录器（morgan）。谁在处理

GET

请求，是express的静态中间件吗？您的应用程序前面是否有缓存服务器？未配置，因此每个

GET

请求使用相同的内容进行响应？可能会发生。你在我的本地主机上说的是真的。当我输入

http://localhost:8080/songs/invalid/url/test?search=

它返回了

无法获取/songs/invalid/url/test

。但在Heroku strang上发生的事情。。。真的不知道为什么…github.com/powerseed/tabtracker\u production这是我应用程序的github repo。如果你能帮我解决这个问题，我很感激~我认为app.js:91中的这个声明导致了这个问题。对于任何get请求，都会发送index.html内容。你应该移除它。app.get（/.*/，function（req，res）{res.sendFile（path.resolve（uu dirname，../public/index.html'））}）我正在尝试这个方法，很快就会给你回复。但Heroku似乎总是以

text/html

的形式发送响应，即使我设置了

{'Content-Type'：'application/json'}

。这与我的本地版本不同，它总是

application/json

Sry I不工作。。我把它推给了Heroku，你可以看到它仍然是

text/html

github.com/powerseed/tabtracker\u产品这是我应用程序的github repo。如果你能帮我解决这个问题，我将不胜感激~

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

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