关于javascript：“仅支持HTTP的交叉源请求。”加载本地文件时出错


“Cross origin requests are only supported for HTTP.” error when loading a local file

我尝试用JSONLoader将一个3D模型加载到three.js中，这个3D模型和整个网站在同一个目录中。

我得到了EDOCX1[1]错误，但我不知道是什么导致的，也不知道如何修复它。

相关讨论

我的水晶球说你用file://或C:/加载模型，因为它们不是http://，所以不会出现错误消息。

因此，您可以在本地PC中安装Web服务器，或者将模型上载到其他地方，然后使用jsonp并将URL更改为http://example.com/path/to/model。

相关讨论

只是要明确一点——是的，错误是说您不能将浏览器直接指向file://some/path/some.html。

以下是一些快速启动本地Web服务器的选项，以使您的浏览器呈现本地文件

Python 2

如果安装了python…

  • 使用命令cd /path/to/your/folder将目录更改为文件some.html或文件所在的文件夹。

  • 使用命令python -m SimpleHTTPServer启动python Web服务器

    • 这将启动一个Web服务器，在http://localhost:8000上承载整个目录列表。

  • 您可以使用一个自定义端口python -m SimpleHTTPServer 9000，提供链接：http://localhost:9000。

    • 这种方法内置于任何Python安装中。

    Python 3

    执行相同的步骤，但使用以下命令代替python3 -m http.server。

    J.N.

    或者，如果您需要更快速的设置并已经使用nodejs…

  • 键入npm install -g http-server安装http-server。

  • 改成你的工作目录，你以前住的地方。

  • 通过发出http-server -c-1来启动HTTP服务器

    • 这将启动node.js httpd，它将目录中的文件作为静态文件提供，这些静态文件可从http://localhost:8080访问。

    红宝石

    如果你喜欢的语言是Ruby…红宝石之神也认为这是可行的：

    1
    ruby -run -e httpd . -p 8080

    PHP

    当然，PHP也有它的解决方案。

    1
    php -S localhost:8000
    相关讨论

    在Chrome中，您可以使用此标志：

    1
    --allow-file-access-from-files

    在这里阅读更多。

    相关讨论

    今天参加了这个活动。

    我写了一些这样的代码：

    1
    2
    3
    4
    5
    app.controller('ctrlr', function($scope, $http){
        $http.get('localhost:3000').success(function(data) {
            $scope.stuff = data;
        });
    });

    …但应该是这样的：

    1
    2
    3
    4
    5
    app.controller('ctrlr', function($scope, $http){
        $http.get('http://localhost:3000').success(function(data) {
            $scope.stuff = data;
        });
    });

    唯一的区别是在第二段代码中缺少http://。

    只是想把它放在那里，以防其他人也有类似的问题。

    只需将URL更改为http://localhost，而不是localhost。如果从本地打开HTML文件，应该创建一个本地服务器来服务该HTML文件，最简单的方法是使用Web Server for Chrome。That will fix the issue.

    相关讨论

    例如，在android应用程序中，为了允许javascript通过file:///android_asset/访问资产，请在WebSettings上使用setAllowFileAccessFromFileURLs(true)，您可以在WebView上调用getSettings()。

    相关讨论

    如果您使用Mozilla Firefox，它将按预期工作，不会出现任何问题；

    令人惊讶的是，intenteexplorer_edge工作得非常好！！！！

    对于那些在没有python或node.js的Windows上的用户，仍然有一个轻量级的解决方案：mongoose。

    您所要做的就是将可执行文件拖到服务器根目录所在的位置，然后运行它。任务栏中会出现一个图标，它将在默认浏览器中导航到服务器。

    另外，z-wamp是一个100%的便携式wamp，运行在一个文件夹中，非常棒。如果您需要一个快速的PHP和MySQL服务器，这是一个选项。

    相关讨论

    我将列出3种解决此问题的不同方法：

  • 使用非常轻的npm包：使用npm install -g live-server安装Live Server。然后，进入该目录，打开终端，输入live-server，点击回车，页面将在localhost:8080处显示。另外：默认情况下，它还支持热重新加载。
  • 使用谷歌开发的轻量级谷歌Chrome应用程序：安装该应用程序，然后转到Chrome中的"应用程序"选项卡，打开该应用程序。在应用程序中，将其指向正确的文件夹。您的页面将被送达！
  • 在Windows中修改Chrome快捷方式：创建Chrome浏览器的快捷方式。右键单击图标并打开属性。在属性中，将target编辑为"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"并保存。然后使用chrome打开使用ctrl+o的页面。注意：不要使用此快捷方式进行常规浏览。

    • 使用http://或https://创建URL

    错误：localhost:8080。

    解决方案：http://localhost:8080。

    对我来说最快的方法是：对于Windows用户，在解决了firefox问题的情况下运行文件，或者如果您想使用chrome，对我来说最简单的方法是安装python 3，然后从命令提示符运行命令python -m http.server，然后转到http://localhost:8000/然后导航到您的文件。

    1
    python -m http.server

    我怀疑有些答案中已经提到了这个问题，但是我会稍微修改一下这个问题以得到完整的工作答案(更容易找到和使用)。

  • 转到：https://nodejs.org/en/download/。安装NoDEJS。

  • 通过从命令提示符npm install -g http-server运行命令来安装HTTP服务器。

  • 切换到您的工作目录，其中index.html/yoursome.html居住。

  • 通过运行命令http-server -c-1启动HTTP服务器

    • 打开网页浏览器至http://localhost:8080。或者http://localhost:8080/yoursome.html—这取决于您的HTML文件名。

    我建议您使用小型服务器在本地主机上运行此类应用程序(如果您不使用某些内置服务器)。

    以下是一个非常简单的设置和运行：

    1
    https://www.npmjs.com/package/tiny-server

    在浏览器上加载一个HTML文件时，我发现了这个错误，该文件使用的是本地目录中的JSON文件。在我的例子中，我可以通过创建一个允许服务器静态内容的简单节点服务器来解决这个问题。我把密码留在另一个答案上了。

    它只是说应用程序应该在Web服务器上运行。我在Chrome上也遇到了同样的问题，我启动了Tomcat，并将我的应用程序移到了那里，它工作了。

    加载本地文件的一种方法是在项目文件夹中使用本地文件，而不是在项目文件夹之外。在项目示例文件下创建一个类似于我们为图像创建的文件夹，并替换使用完整本地路径而不是项目路径的部分，并使用项目文件夹下文件的相对URL。It worked for me

    呃。我刚刚发现一些官方词汇"试图加载使用Dojo/Text插件的非编译、远程AMD模块将由于跨源安全限制而失败"。(AMD模块的构建版本不受影响，因为构建系统消除了对Dojo/Text的调用。)"https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

    为了你们所有人在江户城1号〔19〕上…设置一个简单的洗衣机，使这些迷人的能力在您自己的拷贝铬…

    保存一个plist，在~/Library/LaunchAgents中命名为whatever(例如launch.chrome.dev.mode.plist)，其内容与…

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC"-//Apple//DTD PLIST 1.0//EN""http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
        <key>Label</key>
        <string>launch.chrome.dev.mode</string>
        <key>ProgramArguments</key>
       
            <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
            <string>-allow-file-access-from-files</string>
        </array>
        <key>RunAtLoad</key>
        <true/>
    </dict>
    </plist>

    它应该在启动时启动。但是您可以使用终端命令在任何时候强制它这样做

    launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

    塔达！？？？？？？？？？？？？？？？？？？

    • 为Java.Tomcat安装本地WebServer，对于PHP，可以使用LAMP等
    • 将JSON文件放到公共可访问的应用服务器目录中

    • List item

    • 启动应用服务器，您应该能够从本地主机访问该文件。

    我还能够在使用具有以下href的锚标记时重新创建此错误消息：

    1
    Example a tag

    在我的例子中，使用了一个标记来获取"指针光标"，事件实际上是由某个jqueryon-click事件控制的。我删除了Href并添加了一个适用的类：

    1
    cursor:pointer;

    在没有服务器的情况下无法加载静态本地文件(例如：svg)。如果您的机器中安装了NPM/纱线，则可以使用"HTTP服务器"设置简单的HTTP服务器。

    1
    2
    npm install http-server -g
    http-server [path] [options]

    Or open terminal in that project folder and type"hs". It will automaticaly start HTTP live server.

    相关讨论

    有很多问题，我的问题是缺少'/'示例：jquery-1.10.2.js:8720 xmlhttpRequest无法加载http://localhost:XXXproduct/getlist&taglabels/必须是：http://localhost:xxx/product/getlist aglabels/

    我希望这对解决这个问题的人有帮助。