当前位置: 首页 > 知识库问答 >
问题:

获取API无法加载URL方案对于CORS请求必须是“超文本传输协议”或“https”

拓拔玺
2023-03-14

如果您只在本地运行html文件(Fetch API无法将URL方案加载为CORS请求的“超文本传输协议”或“https”。)我得到了这样的错误代码:如何尝试在本地运行它而不会出错?

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div>Teachable Machine Image Model</div>
        <button type="button" onclick="init()">Start</button>
        <button type="button" onclick="predict()">예측</button>
        <script
            class="jsbin"
            src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
        ></script>
        <div class="file-upload">
            <button
                class="file-upload-btn"
                type="button"
                onclick="$('.file-upload-input').trigger( 'click' )"
            >
                Add Image
            </button>

            <div class="image-upload-wrap">
                <input
                    class="file-upload-input"
                    type="file"
                    onchange="readURL(this);"
                    accept="image/*"
                />
                <div class="drag-text">
                    <h3>Drag and drop a file or select add Image</h3>
                </div>
            </div>
            <div class="file-upload-content">
                <img class="file-upload-image" id="face-image" src="#" alt="your image" />
                <div class="image-title-wrap">
                    <button type="button" onclick="removeUpload()" class="remove-image">
                        Remove <span class="image-title">Uploaded Image</span>
                    </button>
                </div>
            </div>
        </div>

        <div id="webcam-container"></div>
        <div id="label-container"></div>
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
        <script>
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('.image-upload-wrap').hide();

                        $('.file-upload-image').attr('src', e.target.result);
                        $('.file-upload-content').show();

                        $('.image-title').html(input.files[0].name);
                    };

                    reader.readAsDataURL(input.files[0]);
                } else {
                    removeUpload();
                }
            }

            function removeUpload() {
                $('.file-upload-input').replaceWith($('.file-upload-input').clone());
                $('.file-upload-content').hide();
                $('.image-upload-wrap').show();
            }
            $('.image-upload-wrap').bind('dragover', function () {
                $('.image-upload-wrap').addClass('image-dropping');
            });
            $('.image-upload-wrap').bind('dragleave', function () {
                $('.image-upload-wrap').removeClass('image-dropping');
            });
        </script>
        <script type="text/javascript">
            // More API functions here:
            // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image

            const URL = './my_model/';
            let model, labelContainer, maxPredictions;

            async function init() {
                const modelURL = URL + 'model.json';
                const metadataURL = URL + 'metadata.json';
                model = await tmImage.load(modelURL, metadataURL);
                maxPredictions = model.getTotalClasses();


                labelContainer = document.getElementById('label-container');
                for (let i = 0; i < maxPredictions; i++) {
                    // and class labels
                    labelContainer.appendChild(document.createElement('div'));
                }
            }
        </script>
    </body>
    <!-- Copyright (c) 2021 by Aaron Vanston (https://codepen.io/aaronvanston/pen/yNYOXR)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
</html>

代码是(包括许可证。

  1. 请告诉我在本地主机上使用它的权限,而不是http或https
  2. 请告诉我这个权限,如何做,如何使用hdf5制作模型

共有1个答案

缪阎宝
2023-03-14

最简单的方法是运行本地web服务器。您是否安装了节点?现在几乎每个人都这样做,但是如果不是,请遵循以下指示:https://nodejs.org/en/download/

然后创建一个索引.html文件并粘贴上面的代码。打开终端,导航到包含索引文件的目录,然后键入 npx serve。这将获取 https://www.npmjs.com/package/serve 并运行一个小型Web服务器。

索引文件的 URL 将复制到剪贴板。打开浏览器,粘贴链接,您应该会看到该文件。

 类似资料:
  • 我正在使用GWT和Spring controller来管理http流量。有些请求可能需要很长时间,但我希望在超过给定时间时终止请求。 我如何配置超时Spring。我也使用Apache Tomcat 7.0。我试图在tomcat上inrease最大线程,但有一段时间tomcat工作缓慢,因为请求线程不会死。

  • 问题内容: 刚开始在我的学校学习node js。他们给我们完成了一半任务,我需要使next和prev按钮起作用。但是,当我运行index.html时,控制台中会出现一些错误。错误是: “获取API无法加载文件:/// C:/Users/Jack/Desktop/Books_H/book- site/public/api/books。URL方案必须为“ http”或“ https”才能进行CORS请

  • 这些天我正在学习如何使用谷歌排球。快速联网非常方便。似乎所有的请求都在Volley的后台运行。例如: 使用上面的代码,我们可以进行一个在后台运行的POST调用(非阻塞方式)。现在我的问题是:是否有可能以阻塞的方式进行POST呼叫?为什么我需要阻塞方式来进行REST呼叫?因为有些电话,比如签到,应该在做其他事情之前完成。 谢谢

  • 我有专有的基于http的API要从JMeter测试。不幸的是,API的一些endpoint希望http DELETE方法带有请求体(我知道它的API设计有问题,使用DELETE with request body,但我无法更改该API,需要对其进行测试)。 如何从JMeter测试它?似乎标准的HttpRequest采样器在没有任何警告的情况下默默忽略了我的身体有效载荷。(当我在《邮递员》中尝试它时

  • 我对Scala和Gatling完全陌生,请原谅基本问题! 我想用初始http请求的结果指定的创建一个http协议。换句话说: 以JSON的形式获取远程配置,比如从https://example.com/config.json 解析JSON,检索指定的属性 将该值传递给 我可以在每一个场景中手动执行此操作,但这很快就会变得乏味(而且是不必要的重复)。我想找到一个解决方案,我可以在测试运行开始时执行一

  • 我想知道你对这个概念的看法/意见。如果有替代方案?这是否可行/有益? 据我所知,对于每个http请求,服务器都会执行一些操作并返回http响应。 现在考虑任何场景,我们希望对服务器上运行的进程有更多的控制。 情景1:http请求发送- 在这里,资源被浪费了。 情况2:http请求发送- 在这里,客户端不知道服务器中运行的进程的状态。客户端必须等待,直到它获得超文本传输协议响应。 我的想法是:在初始