我正在制作一个随机的Youtube频道重定向器，它工作得很好，但是什么也没有，出现此错误：
尝试获取资源时出现NetworkError
然后，我在Chrome上进行了测试，该网站使他的交易非常顺利。
我已经尝试过在互联网上找到的用于解决此问题的所有解决方案，但我不知道发生了什么。
我的服务器代码是：
const express = require('express')
const Datastore = require('nedb')
const app = express()
require('dotenv').config()
const port = process.env.PORT || 3000
db = new Datastore({ filename: 'database.db', autoload: true})
// initialize server at "port"
app.listen(port, ()=>{
console.log (`listening at port ${port}`)
})
// initialize server post
app.use (express.static('public'))
app.use(express.json({limit: '1mb'}))
// deal with post
app.post('/api', async (request, response) => {
console.log('I got a request')
// body receive the body of the post. In this case, the tags that may be possible sent by ./script/indexPublic.js
const body = request.body
// get the tag sent by the ./script/indexPublic.js if tag exist
tag = body.tags
// check ig tag exist. If it exist, it means that the post came from ./script/indexPublic.js, if it doesn't, the post came from ./script/sendChannel.js
if (tag != undefined){
//the post came from ./script/indexPublic.js
//get the tag, query it into the database end send the results to the client
db.find({tags: tag}, async(err, items)=>{
if (Array.isArray(items) && items.length != 0){
response.json({
status: 'success',
channels: items,
})
console.log(items)
} else {
response.json({
status: 'error',
code: 'This tag doesn't correspond to any of our channels',
})
}
})
} else {
//the post came from ./script/sendChannel.js
// get the form data
channelsInformation = body.channelsInformation
channelsLink = body.channelsInformation[0]
channelsLink = String(channelsLink)
// put tag1, tag2 and tag3 into an single array to send it to the database
channelsTag = [body.channelsInformation[1], body.channelsInformation[2], body.channelsInformation[3]]
// logs the data (for future implementation of a log system)
console.log(`All channel's information: ${channelsInformation}`)
console.log(`Channel's link: ${channelsLink}`)
console.log(`First channel's tags: ${channelsTag[0]}`)
console.log(`Second channel's tags: ${channelsTag[1]}`)
console.log(`Third channel's tags: ${channelsTag[2]}`)
//checks if the insert link is a valid youtube link
const validateLinkRegex = /^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+/
const validationResult = validateLinkRegex.test(channelsLink)
if(validationResult == true){
// valid yutube link
// check if the link already exist into the database
db.find({channelLink: channelsLink}, (err, data)=> {
// check if the link already exist into the database
if(Array.isArray(data) && data.length != 0){
// the link already exist into the database
response.json({
status: 'error',
code: 'The channels has been uploaded into the site already',
})
//return the error message (future log implementation)
console.log('The channels has been uploaded into the site already')
}else{
// the link doesnt exist into the database
// create a objet with link and tags
let newChannel = {channelLink:channelsLink,
tags: channelsTag}
// insert the objet into the database
db.insert(newChannel, (err, newDoc)=>{
console.log(`Inserting the channel ${newChannel} into the database.`)
})
response.json({
// return a success message to the client
status: 'success',
code: 'Channel added into our'
})
}
})
}else{
//the link inst a youtube link
response.json({
// return the error and the error code
status: 'error',
code: 'The input is not a valid youtube link',
})
// return the error to future logs
console.log("Error: this is not a valid youtube link")
}
}
})
客户端脚本是这样的： HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Send a Channel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="./style/style.css">
</head>
<body id="body">
<div class="sendForm">
<h1>Send a Channel</h1>
<br/>
<a href='index.html' class="btn btn-warning">Find your new favorit channel</a>
<p>
<div id="alert" style="display: none">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalHeader">Error</h5>
</div>
<div class="modal-body">
<p id="modalBodyCode">Error Code</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id = "gotItButton">Got it!</button>
</div>
</div>
</div>
</div>
<form id="form">
<p>Channel Link</p><input id='channelLink' class="form-control" style="text-align: center; width: 25%; margin-left: 37%" required><br/>
<p>Tag 1</p><input id='tag1' class="form-control" style="text-align: center; width: 10%; margin-left: 45%;" required><br/>
<p>Tag 2</p><input id='tag2' class="form-control" style="text-align: center; width: 10%; margin-left: 45%" required><br/>
<p>Tag 3</p><input id='tag3' class="form-control" style="text-align: center; width: 10%; margin-left: 45%" required><br/>
<input type="submit" id="submit" value="Submit" class="btn btn-dark">
</form>
</p>
<script src = './script/sendChannels.js'></script>
</div>
</body>
</html>
JavaScript
// set the submit button
const submitChannelButton = document.getElementById('submit')
const gotItButton = document.getElementById('gotItButton')
function finalHandle(status, code){
document.getElementById('modalHeader').innerText = status
document.getElementById('modalBodyCode').innerText = code
document.getElementById('alert').style.display = 'unset'
gotItButton.addEventListener('click', ()=>{
document.getElementById('alert').style.display = 'none'
document.getElementById('modalHeader').innerText = ''
document.getElementById('modalBodyCode').innerText = ''
})
}
// handle with the 'click' event
submitChannelButton.addEventListener('click', async ()=>{
// get the form values
const channelLink = document.getElementById('channelLink').value
const tag1 = document.getElementById('tag1').value
const tag2 = document.getElementById('tag2').value
const tag3 = document.getElementById('tag3').value
if (tag1 == '' || tag2 == '' || tag3 == '' || tag1 == tag2 || tag1 == tag3 || tag2 == tag1 || tag2 == tag3 || tag3 == tag1 || tag3 == tag2){
}else{
// put all the data into a single array
const channelsInformation = [channelLink, tag1, tag2, tag3]
console.log(channelsInformation)
// put the array containing data into a object to sent it by post method
const dataTag = {channelsInformation}
// define the POST method and deal with the data to be send
const options = {
method: 'POST',
headers: {
'Content-Type':'application/json'
},
body: JSON.stringify(dataTag)
}
// do the POST request
const response = await fetch('/api', options)
// listen to the request rensponse
const comunicationResult = await response.json()
// future logs
console.log(comunicationResult)
// check if it has some error in the request
if(comunicationResult.status == 'error'){
// theres an error
// future logs
console.log(comunicationResult.code)
// send the error code to the client
finalHandle(comunicationResult.status, comunicationResult.code)
// clean the form
document.getElementById('channelLink').value = ''
document.getElementById('tag1').value = ''
document.getElementById('tag2').value = ''
document.getElementById('tag3').value = ''
}else{
// theres no error
// send the message that the new channel has been included into the database
finalHandle(comunicationResult.status, comunicationResult.code)
// future logs
console.log(comunicationResult.status)
// clear the form
document.getElementById('channelLink').value = ''
document.getElementById('tag1').value = ''
document.getElementById('tag2').value = ''
document.getElementById('tag3').value = ''
}
}
})
脚本必须将带有channelLin和标签但
的数组发送到服务器TypeError：“尝试获取资源时出现NetworkError
保持警惕。