文章/答案/技术大牛

发布

社区首页 >问答首页 >由于mime类型不匹配，js资源被阻止。

问由于mime类型不匹配，js资源被阻止。
EN

Stack Overflow用户

提问于 2021-05-22 13:42:33

回答 1查看 136关注 0票数 0

我一直收到这样的错误：

Loading failed for the <script> with source “http://localhost:3000/task-manager/public/js/signup.js”.
The resource from “http://localhost:3000/task-manager/public/js/signup.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

我的目录结构：

---task-manager
   ---public
      ---js
         ---signup.js
   ---src
      ---models
      ---db
      ---routers
      ---templates
         ---views
            ---register.hbs
         ---partials
      ---index.js

index.js代码:-

const express = require('express')
const hbs = require('hbs')
const path = require('path')

//importing database connection
require('./db/mongoose')

//importing models 
const User = require('./models/users')
const Task = require('./models/tasks')

//importing routes
const userRouter = require('./routers/user')
const taskRouter = require('./routers/task')

//making instance of express application
 const app = express()

 const port = process.env.PORT || 3000

//defining paths for express config 
const publicDirectoryPath = path.join(__dirname , '../public')
const viewsPath = path.join(__dirname , '../templates/views')
const partialsPath = path.join(__dirname , '../templates/partials')

//setup handlebars engine and views location 
app.set('view engine' , 'hbs')
app.set('views' , viewsPath)
hbs.registerPartials(partialsPath)

//console.log(__dirname)

//setup static directory to serve
app.use(express.static(publicDirectoryPath))

app.use(express.json())
app.use(userRouter)
app.use(taskRouter)


app.get('' , (req , res) => {
   //res.setHeader('Content-Type' , 'text/html')
    res.render('register')
   //res.sendFile('/Node Projects/task-manager/public/html/register.html')
})

app.listen(port , () => {
    console.log("Server is up and running !!")
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
    
</head>

<body>
    <h2 style="color : solid grey ; opacity: 0.8;">Registration Page for User</h2>
    <div class="formclass">
        <form id="registerform" method="POST" enctype="application/json">
            <label for="nameinput">Name :</label>
            <div>
                <input type="text" name="name" placeholder="user_name" id="nameinput">
            </div>
            <br>
            <label for="emailinput">Email :</label>
            <div>
                <input type="email" name="email" placeholder="user_email" id="emailinput">
            </div>
            <br>
            <label for="passwordinput">Password :</label>
            <div>
                <input type="password" name="password" placeholder="user_passwod" id="passwordinput">
            </div>
            <br>
            <div>
                <input type="submit" value="Sign Up" id="submitBtn">
            </div>

        </form>

    </div>
    <script src="/task-manager/public/js/signup.js" type="text/javascript"></script>
    <!-- <script>
        document.getElementById("submitBtn").addEventListener('click', function (event) {
            event.preventDefault()
            console.log(event)
        })
    </script> -->
</body>

</html>

我的signup.js :-

var signupbtn = document.getElementById("submitBtn")

signupbtn.addEventListener('click' , function(event){
    event.preventDefault()
    postdatatobackend(e);
})

function postdatatobackend (event) {

    event.preventDefault()
    var form = document.getElementsById("registerform")
    var formdata = new FormData(form)

    var data = Object.fromEntries(form.entries)
    data = JSON.stringify(data)

    var xhr = new XMLHttpRequest()

    const url = "/users"

    xhr.open('POST' , url , true)
    xhr.responseType = "json"
    xhr.setRequestHeader('Content-Type' , 'application/json')

    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 201){
            var res = this.response
            console.log(res)
        }
    }

    xhr.send(data)

}

尽管signup.js并没有像我所理解的那样制造问题。我尝试了所有我在互联网上得到的东西，但问题还没有解决。

我还尝试将响应头设置为"text/javascript“，但它不起作用，因为浏览器现在不能呈现html。

html

node.js

express

handlebars.js

mime-types

回答 1

Stack Overflow用户

发布于 2021-05-22 14:23:22

实际上，我给signup.js提供了错误的路径。我没有意识到我已经在express，index.js中设置了公共目录路径。我必须在path.join(__dirname，'../public')的结果之后给出路径。

现在我在register.hbs中访问signup.js的路径是:-

<script src="/js/signup.js" type="text/javascript"></script>

如果你们中有谁想回答这个问题，谢谢。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67646476

复制

相似问题

问由于mime类型不匹配，js资源被阻止。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问由于mime类型不匹配，js资源被阻止。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问由于mime类型不匹配，js资源被阻止。
EN