将我的 mern 应用程序部署到 Heroku 后,GET主页上的请求('http://localhost:8000/post/')现在返回index.html而不是json data从请求中返回。我正在获取200 status代码,但响应是html. 但是,它在本地运行良好。
除了这个请求之外,所有其他请求都在工作。每当我认为我已经修复它时,Heroku 会在同一条路线上显示 json 数据而不是 UI。我假设这些问题是相关的。
我该如何解决这个问题?谢谢!
路由/控制器 - 列出帖子
router.get('/', (list))
exports.list = (req, res) => {
const sort = { title: 1 };
Post.find()
.sort(sort)
.then((posts) => res.json(posts))
.catch((err) => res.status(400).json("Error: " + err));
};
Run Code Online (Sandbox Code Playgroud)
服务器.js
require("dotenv").config();
// import routes
...
const app = express();
// connect db - first arg is url (specified in .env)
const url = …Run Code Online (Sandbox Code Playgroud) 我正在学习制作电子商务网站的课程,当我尝试注册用户时,我收到此错误:
讲师克隆了我的存储库并没有收到任何错误,但是每当我尝试注册或登录时都会收到错误消息。
我该如何解决这个问题?任何帮助将非常感激。也许我用来处理错误的 errorHandler 文件存在问题。
控制器/auth.js
const User = require('../models/user')
const jwt = require('jsonwebtoken') // to generate signed token
const expressJwt = require('express-jwt') // for authorization check
const { errorHandler } = require('../helpers/dbErrorHandler')
exports.signup = (req, res) => {
console.log("req.body", req.body)
// signs up new user
const user = new User(req.body)
user.save((err, user) => {
if(err) {
return res.status(400).json({
err: errorHandler(err)
})
}
user.salt = undefined
user.hashed_password = undefined
res.json({
user
})
})
}
exports.signin = (req, res) => { …Run Code Online (Sandbox Code Playgroud) 我的 Draft.js<TextEditor />填充body了文本 eg:'{"blocks":[{"key":"3mont","text":"lorem ipsum","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}'并在使用convertToRaw().
在 中Post.js,我想text从数据库中检索并显示格式化的内容。我读过为了做到这一点,我必须使用convertToRaw()然后convertFromRaw()从数据库中检索它时,但我遇到了与此相同的问题(我收到cors错误和Unexpected token u in JSON at position 0),每当我使用convertFromRaw()并尝试检索格式化text从数据库。
我已将服务器设置为支持cors,为什么会收到cors错误消息?是因为我试图将无效响应解析为JSON吗?如何text从 db 中获取格式Post.js?任何帮助将非常感激!
创建Post.js
class CreatePost extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "",
body: EditorState.createEmpty(),
};
}
changeHandler = (e) => {
this.setState({ [e.target.name]: e.target.value …Run Code Online (Sandbox Code Playgroud) 我正在构建一个响应式网站,我正在使用overflow-x: hidden属性来阻止页面水平滚动并显示空白,但它不适用于手机。每次我导航回页面时,水平滚动条都会再次显示,并且右侧会出现空白区域。我已经查看了有关此问题的各种其他问题,但似乎无法解决。
我相信它与页面上的卡片有关,卡片上的任何样式是否会导致此问题?如何去除空白?
html {
overflow-x: hidden;
}
.portfolio-header {
margin-top: 19rem;
margin-left: 31%;
font-size: 30px;
}
}
.card-square
{
position: relative;
width: 90%;
height: 300px;
display: flex;
margin-left: 0px;
margin-top: 50px;
margin-bottom: 100px;
justify-content: center;
align-items: center;
}
.card-square-2 {
margin-top: 0rem;
}
.card-square span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #000;
border-radius: 38% 62% 63% 37% /
41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite; …Run Code Online (Sandbox Code Playgroud)我已经从API检索了一些图像,但是它们没有出现。绿色和蓝色的图像图标显示在我的网页上的位置上,而不是实际的图像显示。我需要更改/添加代码以显示图像吗?
let html = [];
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key="*"')
.then((resp) => resp.json())
.then(function(data) {
data.results.slice(0, 4).forEach(res => {
html.push(`<h1>${res.title}</h1>`)
html.push(`<p>${res.url}</p>`)
html.push(`<p>${res.abstract}</p>`)
html.push(`<p>${res.published_date}</p>`)
html.push(`<img src='${res.multimedia[4]}.url'/>`)
})
document.getElementById("res").innerHTML = html.join("")
})
Run Code Online (Sandbox Code Playgroud)
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="index.js"></script>
</head>
<body>
<h1>Top Stories</h1>
<button class="accordion">Story 1</button>
<div class="panel">
<div id="res"></div>
</div>
<button class="accordion">Story 2</button>
<div class="panel">
<div id="accordion"></div>
</div>
<button class="accordion">Story 3</button>
<div class="panel">
<div id="accordion"></div>
</div>
<button class="accordion">Story 4</button>
<div class="panel">
<div id="accordion"></div>
</div>
</body>Run Code Online (Sandbox Code Playgroud)
单击按钮时,我将显示图像(在 JS 函数中),但是每次单击按钮时该函数都会打印图像。我希望该函数只运行一次,以便图像只能显示一次。我需要在我的代码中添加什么才能做到这一点?
<button class="colour-btn colour-btn--3" onClick="showImage3()"></button>
Run Code Online (Sandbox Code Playgroud)
function showImage3() {
var img3 = document.createElement('img')
img3.setAttribute("src", "")
img3.setAttribute("width", "700")
img3.setAttribute("height", "400")
document.body.appendChild(img3)
}
Run Code Online (Sandbox Code Playgroud) 我正在通过NY Times API在网页上显示一些数据,但我只希望显示前4条文章。我如何只显示前4个,其余的在JavaScript中消失呢?
我还没有尝试过任何可能的解决方案,因为我真的不知道该怎么做。
这是我从API中显示的一些数据,但报纸上有20篇热门新闻,我只想显示4个。

let html = [];
fetch('https://api.nytimes.com/svc/topstories/v2/technology.json?api-key=...')
.then((resp) => resp.json())
.then(function(data) {
data.results.forEach(res => {
html.push(`<h1>${res.title}</h1>`);
html.push(`<p>${res.url}</p>`);
html.push(`<p>${res.abstract}</p>`);
html.push(`<p>${res.published_date}</p>`);
html.push(`<image>${res.multimedia[4]}</image>`);
})
document.getElementById("res").innerHTML = html.join("");
})
Run Code Online (Sandbox Code Playgroud)