＆quot'Cross Origin请求仅支持HTTP。”加载本地文件时出错

Question

我正在尝试将3D模型加载到本地存储在我的计算机上，并使用 jsonloader 将3D模型与整个网站相同的目录中。

我得到“跨越来源的请求仅支持HTTP。” 错误，但我不知道是什么原因导致了它，也不知道如何修复它。

Answer 1

我的水晶球说您正在使用 file：// 或 c：/加载模型，因为它们不是 http ：// ，

因此您可以在本地PC中安装Web服务器，也可以将模型上传到其他地方，然后使用 JSONP ，然后将URL更改为 http://example.com/路径/to/model

oneration在 rfc-6454

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

尽管您的文件源自同一主机（ localhost ），但只要该方案不同（ http / file> file ），它们就会得到处理。作为不同的起源。

Answer 2

只是要明确 - 是的，错误是说您不能直接指向浏览器 file> file：//some/path/some.html

这里有一些选择，可以快速旋转本地Web服务器以便 则浏览器渲染本地文件

python

如果您安装了python，

1. ...

   将目录更改为文件夹中的文件 some.html < /code>或使用命令 cd /path存在文件（s） /to/您的/文件夹

   


2. 启动python Web服务器使用以下命令之一

   之一

   python -m simplehttpserver＃python 2

   python3 -m http.server＃python 3

这将启动一个Web服务器，以托管您的整个目录列表，at http：// localhost：8000

3. 您可以使用自定义端口 python3 -m http.server 9000 提供链接： http：// localhost：9000 要指向您的浏览器

对此方法的指向任何Python安装。

vscode

如果您使用的是 Visual Studio Code 您可以安装

node.js

，如果您需要更响应的设置，并且已经使用nodejs ...

1. install http-server 通过键入 NPM安装-G http -server

2. 更改为工作目录，其中 some.html lives lives < /p>

3. 通过发行 http-server -c-c-1

   启动http服务器

然后旋转一个node.js httpd，该httpd将目录中的文件服务为静态文件，可从 http：// localhost：8080

ruby

​​如果您喜欢的语言是Ruby ... Ruby gods也说这也有效：

ruby -run -e httpd . -p 8080

PHP

当然也具有解决方案。

php -S localhost:8000

Answer 3

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

--allow-file-access-from-files

在此处阅读更多：如何使用chrome at” - “ hallow-file-access-from-files”模式启动HTML？

Answer 4

今天跑去。

我编写了一些看起来像这样的代码：

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

...但是应该看起来像这样：

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

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

只是想在其他情况下遇到类似问题的其他问题。

Answer 5

只需将URL更改为 http：// localhost 而不是 localhost 。如果您从本地打开HTML文件，则应创建一个本地服务器来服务该html文件，最简单的方法是使用 for Chrome 。这将解决这个问题。

Answer 6

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

1. 使用非常轻巧的 npm package ：安装 live-server 使用 npm install -g install -g live-server 。然后，转到该目录打开终端和类型 live-server 并命中Enter，页面将通过 localhost：8080 提供。奖励：默认情况下还支持热重新加载。
2. 使用轻量级的Google Chrome 由Google开发：安装应用程序，然后转到Chrome中的“应用”选项卡并打开应用程序。在应用程序中，将其指向右边的文件夹。您的页面将提供！
3. 在Windows中修改Chrome快捷方式：创建Chrome浏览器的快捷方式。右键单击图标并打开属性。在属性中，编辑 target to “ C：\ Program Files（x86）\ Google \ Chrome \ Chrome \ application \ chrome.exe” - disable-web-security -user-data-data-data-data-data =“ C：/Chromedevsession” 并保存。然后使用Chrome使用 Ctrl+O 打开页面。注意：做不使用此快捷方式进行常规浏览。

注意：使用 http：// 喜欢 http：// localhost：8080 ，以防您面临错误。

Answer 7

使用 http：// 或 https：// 创建URL

错误： localhost：8080

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

Answer 8

在Android应用程序中 - 例如，允许JavaScript可以通过 file：/// Android_asset/访问资产 - 使用 setallowfileafileAccessFromfileUrls（true）（true） 您从调用 getSettings（）在 WebView 上获得。

Answer 9

对我来说最快的方法是：
对于Windows用户，在解决Firefox问题上运行文件，或
如果您想对我使用Chrome最简单的方法是安装Python 3，则从命令提示符命令 Python -M http.server 然后转到 http：// localhost：8000/然后导航到您的文件

python -m http.server

Answer 10

简单的解决方案使用VS代码

我已经遇到了一段时间。大多数答案有效。但是我找到了一个不同的解决方案。如果您不想处理 node.js 或此处的任何其他解决方案，并且正在使用HTML文件（从另一个JS文件或Fetch JSON API的调用函数）尝试使用 live服务器扩展。

它使您可以轻松打开Live服务器。由于它创建 localhost 服务器，因此问题正在解决。您可以通过打开HTML文件并在编辑器上右键单击 Localhost 启动 ，然后单击使用Live Server 打开。

它基本上是使用 http：//localhost/index.html 而不是使用 file> file> file> file> file>：// ... 。

编辑

不必拥有 .html 文件。您可以使用快捷方式启动Live服务器。

hit （alt+l，alt+o）打开服务器和（alt+l，alt+c）停止服务器。 [在Mac， CMD+L，CMD+O 和 CMD+L，CMD+C ]

希望它能帮助某人:)

Answer 11

如果您使用旧版本的Mozilla Firefox（2019年前），它将按预期工作，没有任何问题；

PS令人惊讶的是，旧版本的Internet Explorer＆amp;边缘的工作也绝对很好。

Answer 12

更新：我亲自关闭 security.fileuri.strict_origin_policy_policy 在Firefox中通过关于：config 。它允许提取可以在我的本地HTML文件中工作，因此我可以在不必启动服务器的情况下测试工作。与Chrome不同，Firefox无需重新启动即可更改此政策。我不知道这可能会如何影响正常的浏览。我认为它仅影响您打开的本地.html文件。但是Firefox无论如何都不是我的主要浏览器，所以我只是将其保留。

对于那些没有python或node.js的窗户上的人，仍然有一个轻巧的解决方案： mongoose /strong>。

您所要做的就是将可执行文件拖到服务器的根部所在的任何地方，然后运行它。图标将显示在任务栏中，并将在默认浏览器中导航到服务器。

另外， z-wamp 是一个100％的便携式wamp，在单个文件夹中运行，很棒。如果您需要快速的PHP和MySQL Server，则可以选择。尽管自2013年以来就没有进行更新。现代替代方案是 laragon 或 winnmp 。我没有测试过它们，但是它们是便携式的，值得一提的。我也是

另外，如果您只想要绝对的基础知识（HTML+JS），这是一个微小的PowerShell脚本，不需要安装或下载任何内容：

$Srv = New-Object Net.HttpListener;
$Srv.Prefixes.Add("http://localhost:8080/");
$Srv.Start();
Start-Process "http://localhost:8080/index.html";
While($Srv.IsListening) {
    $Ctx = $Srv.GetContext();
    $Buf = [System.IO.File]::OpenRead((Join-Path $Pwd($Ctx.Request.RawUrl)));
    $Ctx.Response.ContentLength64 = $Buf.Length;
    $Ctx.Response.Headers.Add("Content-Type", "text/html");
    $Buf.CopyTo($Ctx.Response.OutputStream);
    $Buf.Close();
    $Ctx.Response.Close();
};

此方法非常准确，它不能显示目录或其他奇特的东西。但是它处理了这些CORS错误。

将脚本保存为 server.ps1 ，并在项目的根部运行。它将在放置的目录中启动index.html。

Answer 13

我怀疑在某些答案中已经提到了它，但是我会稍微修改以使其具有完整的工作答案（更易于找到和使用）。

1. 转到： https://nodejs.org/en/down/down/load/ 。安装nodejs。

2. 通过命令提示 npm Install -G http-server

3. 更改为您的工作目录，其中 index.html / youserome.html 居住。

4. 通过运行命令 http-server -c-1

   启动您的HTTP服务器，

Open Open Web浏览器到 http：// localhost：8080
或 http：// localhost：8080/youserome.html - 取决于您的HTML文件名。

Answer 14

当在使用本地目录的JSON文件的浏览器上加载HTML文件时，我会遇到此确切的错误。就我而言，我能够通过创建允许使用服务器静态内容的简单节点服务器来解决此问题。我在此其他答案。

Answer 15

它只是说该应用程序应在Web服务器上运行。我对Chrome遇到了同样的问题，我开始使用Tomcat并将其应用于那里，并且奏效了。

Answer 16

我建议您使用迷你服务器在Localhost上运行此类应用程序（如果您不使用某些内置服务器）。

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

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

Answer 17

没有服务器，无法加载静态本地文件（例如：SVG）。如果计算机中安装了NPM/YARN，则可以使用“ http-serverrer”> http-serverrer ”

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

或该项目文件夹中的打开终端，然后键入“ HS”。它将自动启动http live服务器。

Answer 18

当我下载页面以供离线视图时，经历了这一点。

我只需要删除 Integrity =“ *****” and crossorigin =“ Anonymous” 属性，从所有＆lt; link＆gt; and ＆lt; script＆gt; 标签

Answer 19

如果您坚持在本地运行 .html 文件，而不是与Web服务器一起使用，则可以通过使有问题的资源内联用来防止这些交叉原点请求进行。

我试图通过 file> file> file> file> file> file> file> file> file> file>。我的解决方案是更新我的构建脚本以替换＆lt; script src =“ ...”＆gt; 标签，用＆lt; script＆gt; ...＆lt;/script＆gt; 。
这是 Gulp 做到这一点的方法：

1。
运行 npm install -save-dev 到软件包 Gulp ， Gulp-Inline 和 del 。

2。
创建 gulpfile.js 到根目录之后，添加以下代码（只需更改您适合您的任何适合您的文件路径）：

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))

3. 要么运行 Gulp Bundle-for-local 或更新您的构建脚本以自动运行它。

您可以看到我的案例在这里的详细问题和解决方案。

Answer 20

对于 macos ...设置一个简单的启动，在您自己的 chrome ...

保存 中启用这些迷人的功能，以启用这些迷人的功能... plist ，名为 whyther （ aunplion.chrome.dev.mode.plist ）） /code>具有与...

<?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>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

相似的内容应在启动时启动。但是，您可以随时使用终端命令

laundingctl load -w〜/Library/ launchagents/lunage.chrome.dev.mode.plist

tada！

Answer 21

嗯。我刚刚发现了一些官方单词“试图加载使用Dojo/文本插件的未构建的远程AMD模块，由于跨原始安全性限制而导致失败。构建系统。）“

Answer 22

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

Answer 23

• 安装用于Java的本地Web服务器，例如php，您可以使用lamp等，
• 将json文件放在公共访问的应用服务器目录中

• 

• sstatic.net/ahzti.png“ rel =“ nofollow noreferrer”> 访问该文件

Answer 24

对于Linux Python用户：

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

Answer 25

为此，我的问题缺少'/'示例：
jQuery-1.10.2.js：8720 xmlhttprequest不能加载 http：// localhost：xxx/product/getlist_taglabels/

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

Answer 26

使用以下HREF，我还可以重新创建此错误消息：

<a href="javascript:">Example a tag</a>

在我的情况下，正在使用一个标签来获取“指针光标”，并且该事件实际上是由点击事件的一些jQuery控制的。我删除了HREF并添加了适用的类：

cursor:pointer;

Answer 27

科尔多瓦实现了这一点。我仍然不知道科尔多瓦的表现如何。它甚至没有通过Enewernceptrequest。

后来我发现从本地加载任何文件的关键是：mywebview.getSettings（）。setallowuniversalaccessalaccessfromfileurls（true）;

当您要访问任何HTTP资源时，WebView将使用选项方法进行检查，您可以通过webViewClient.shoundinderceptrequest通过返回响应来授予访问权限，并且对于以下get/post方法，您只需返回null。

Answer 28

如果要搜索firebase托管的解决方案，则可以

从 firebase cli

这就是我来这里的目的，所以我想我只是把它留在这里以帮助喜欢。

Answer 29

如果您使用的VS代码只是尝试在其中加载实时服务器。立即解决了我的问题。

Answer 30

URL应该像：

 createUserURL = "http://www.localhost:3000/api/angular/users"

而不是：

 createUserURL = "localhost:3000/api/angular/users"