Javascript &引用；仅HTTP支持跨源请求。”；加载本地文件时出错

我正在尝试使用

JSONLoader

将一个3D模型加载到Three.js中，该3D模型与整个网站位于同一目录中

---

我得到了

“跨源请求仅支持HTTP。”

错误，但我不知道是什么原因导致它，也不知道如何修复它。

我的水晶球说您正在使用

文件：//

或

C://

加载模型，这与错误消息保持一致，因为它们不是

HTTP://

因此，您可以在本地PC中安装Web服务器，也可以将模型上载到其他地方，然后使用

jsonp

并将url更改为

http://example.com/path/to/model

原产地定义如下：

---

因此，即使您的文件源于同一主机（

localhost

），但只要方案不同（

http

/

file

），它们就被视为不同的源文件。

简单地说，是的，错误是您不能将浏览器直接指向

file://some/path/some.html

这里有一些选项可以快速启动本地web服务器，让您的浏览器呈现本地文件

Python 2 如果您安装了Python

使用命令

cd/path/to/your/folder

使用命令

Python-msimplehttpserver

这将启动一个web服务器，在

http://localhost:8000

您可以使用自定义端口

python-msimplehttpserver 9000

提供链接：

http://localhost:9000

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

Python 3 执行相同的步骤，但改用以下命令

python3-mhttp.server

Node.js 或者，如果您需要更具响应性的设置，并且已经在使用nodejs

通过键入

npm安装-g http服务器安装
http服务器

切换到您的工作目录，您的

some.html

所在的位置

通过发出

http服务器-c-1

这将启动一个Node.js httpd，它将目录中的文件作为可从

http://localhost:8080

红宝石 如果您的首选语言是Ruby。。。红宝石之神说这同样有效：

ruby -run -e httpd . -p 8080

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

php -S localhost:8000

今天遇到了这个

我写了一些类似这样的代码：

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;
    });
});

…但应该是这样的：

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://

---

我只是想说出来，以防有其他人有类似的问题。

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

--allow-file-access-from-files

---

我在浏览器上加载HTML文件时遇到了这个错误，该浏览器使用本地目录中的json文件。在我的例子中，我能够通过创建一个简单的节点服务器来解决这个问题，该服务器允许服务器静态内容。我把代码留在这里。

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

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

---

另外，它是一个100%可移植的WAMP，运行在一个文件夹中，非常棒。如果您需要快速的PHP和MySQL服务器，这是一个选项。

er。我刚刚发现了一些官方词语“由于跨源安全限制，尝试加载使用dojo/text插件的未构建远程AMD模块将失败。（AMD模块的构建版本不受影响，因为构建系统消除了对dojo/text的调用。）”

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

---

这对我来说很有用，对MacOS上的所有人来说都很有用。。。设置一个简单的LaunchAgent，在您自己的Chrome副本中启用这些迷人的功能

将名为which（

launch.chrome.dev.mode.plist

）的

plist

保存在

~/Library/LaunchAgents

中，内容与

<?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>

标签
launch.chrome.dev.mode
程序参数
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
-允许从文件访问文件
运行负荷

它应该在启动时启动。。但您可以随时使用terminal命令强制它这样做

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

---

多田这方面有很多问题，我的问题是缺少“/”示例： jquery-1.10.2.js:8720 XMLHttpRequest无法加载 它必须是：

---

我希望这对遇到这个问题的人有所帮助。

它只是说应用程序应该在web服务器上运行。我在chrome上也遇到了同样的问题，我启动了tomcat并将我的应用程序移到了那里，它成功了。

只需将url更改为

http://localhost

而不是

localhost

。如果从本地打开html文件，则应创建一个本地服务器来服务该html文件，最简单的方法是使用。这将解决问题。

在Android应用程序中-例如，允许JavaScript通过

file:///android_asset/

-在

WebSettings

上使用

setAllowFileAccessFromFileURLs（true）

，这是通过调用

WebView

上的

getSettings（）

获得的

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

python -m http.server

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

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'))