【发布时间】：2020-05-03 04:08:51
【问题描述】：
我的应用是使用 Vue 和 Express 开发的。
我的应用程序中有一个错误仅发生在 Heroku 或生产环境中，而不发生在 localhost 或开发环境中。
我的应用程序已开启
赫罗库：https://immense-refuge-12167.herokuapp.com/
github：https://github.com/powerseed/tabtracker_production
如果点击左上角的“浏览器”链接，控制台上会打印一个名为“response”的对象，如下图所示：
它是从后端返回的响应，其 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上，输出如下图，是正确的。
这是我在客户端中的代码，它将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 请求并从 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. '
})
}
})
这很奇怪，因为它在 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，这与我的本地主机不同，即使我没有添加'Content-Type': 'application/json'，它也始终为application/json
【问题讨论】：
-
试试添加
headers: {'content-type': 'application/json' } -
你能告诉我在哪里添加吗？我刚开始学习前端。 @upog
-
Axios 在它的配置对象中获取一个 headers 键。你可以在那里添加它。看起来像这样：
headers: {'Content-Type': 'application/json'} -
我很好奇
data键中的 HTML 是什么。您是否尝试复制并粘贴到 html 文件中并在浏览器中呈现它？可能是返回为 HTML 的错误 -
@DanFletcher 我更新了这篇文章添加了html代码，请看一下。
标签： javascript node.js vue.js sequelize.js