net::ERR_ABORTED 404未找到Azure 函数

编程问答 2022-04-30

问题描述

我正在使用 Azure Functions 提供 HTML 文件。但是，我无法链接到目录中的 css 文件和引用 js 脚本，从而导致错误，即 HttpTrigger1:19 GET http://localhost:7071/api/js/jquery.min.js net::ERR_ABORTED 404 (Not Found)

js 和 css 文件的路径似乎是正确的。如何防止这个错误的发生？目录以及 index.html 和 index.js 可以在下面找到。

目录

HttpTrigger1
│   function.json
│   image.jpg
│   index.html
│   index.js
│   sample.dat
|
├───css
│       bootstrap.min.css
│       jquery.Jcrop.min.css
│
└───js
        bootstrap.min.js
        form-image-crop.js
        jquery.color.js
        jquery.Jcrop.min.js
        jquery.min.js

index.js

var fs = require('fs');


module.exports = function (context,req) {
    var filepath = __dirname + '/index.html'
    fs.readFile(filepath,'utf8',function (err,content) {
        if (err) {
            context.log.error(err);
            context.done(err);
        }
        //context.log(result.name);
        context.res = {
            status: 200,headers: 
                {
                    'Content-Type': 'text/html'
                },body: content
        };
        context.done();
    });
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>hello world</title>
        <!-- <link rel="stylesheet" href="https://unpkg.com/jcrop/dist/jcrop.css"> -->
        <link href="./css/jquery.Jcrop.min.css" rel="stylesheet">
        <link href="./css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <h1>Hello World!</h1>
        <div id="cordCon">
            X: <input name="x"><br />
            Y: <input name="y"><br />
            W: <input name="w"><br />
            H: <input name="h">
        </div>
        <img src="https://lh3.googleusercontent.com/-EMgI2OzK2E0/T2xktULgfMI/AAAAAAAAAQE/WSQU5IR_mdQ/s443/bipolar-nature-ipad-wallpapers.jpg" id="target">
        
        <script src="./js/jquery.min.js" type="text/javascript"></script>
        <script src="./js/jquery.Jcrop.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <!-- <script src="https://unpkg.com/jcrop"></script> -->
        <script type="text/javascript">
        $(document).ready(function () {
       
            $.Jcrop('#target',{
                /*setSelect: [400,200,50,50],*/
                aspectRatio: 16 / 8,onSelect: showCords,onChange: showCords
            }/*,function(){
                jcrop_api = this;
            }*/);
        });//end document ready fn
        function showCords(c){
            console.log(c);
            $('input[name="x"]').val(c.x);
            $('input[name="y"]').val(c.y);
            $('input[name="w"]').val(c.w);
            $('input[name="h"]').val(c.h);
        }
        </script>
    </body>
</html>

解决方法

js 文件夹似乎在 HttpTrigger1 下，所以当请求 http://localhost:7071/api/js/jquery.min.js 时，它显示 404。

您应该使用 http://localhost:7071/api/HttpTrigger1/js/jquery.min.js 或者您也可以更改文件夹 js 的控制杆（将其移动到与 HttpTrigger1 相同的级别）。

azure-functionshtmljavascriptjcropjquery