加载本地文件时出错“仅支持HTTP来源的跨源请求”

我试图用JSONLoader将3D模型加载到Three.js中,并且该3D模型与整个网站位于相同的目录中。

我得到"Cross origin requests are only supported for HTTP." 错误,但我不知道是什么原因造成的,也不知道如何解决。

我的水晶球说你正在使用file://或者C:/加载模型,它保持为错误消息,因为它们不是http://

所以你可以在你的本地PC上安装一个web服务器,或者把模型上传到别的地方,然后使用jsonp并把url改成http://example.com/path/to/model

只是为了明确 – 所以是的,你不能直接指向你的浏览器在file://some/path/some.html,所以相反,一旦你有python安装光盘到dir其中some.html文件生活然后发出:

  python -m SimpleHTTPServer 

这将启动一个Web服务器托pipe整个目录列表,您从URL中引用:

 http://localhost:8000 

这是内置到任何python安装(包括电池)。 对于python3使用这个:

 python3 -m http.server 

或者,如果您要求更响应的设置,并已经使用nodejs问题

 npm install -g http-server 

然后,如上所述,cd进入包含你的some.html的dir,然后发出:

 http-server -c-1 

它会启动一个nodejs httpd,它可以从你的静态文件列表中看到:

 http://localhost:8080 

如果你的首选语言是ruby…ruby上帝说这也适用

 ruby -run -e httpd . -p 8080 

当然,PHP也有其解决scheme

 php -S localhost:8000 

在Chrome中,您可以使用此标志:

 --allow-file-access-from-files 

在这里阅读更多。

今天就跑到这里

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

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

唯一的区别是在第二个代码片段中缺lesshttp://

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

简单的Node.js解决scheme

1)安装http-server: npm install http-server -g
2)运行: http-server C:\location\to\app步骤2将会像这样输出

 Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.0.104:8080 

现在你有一个本地服务器启动并运行。 您可以通过步骤2提供的url访问您的应用程序

只需将url更改为http://localhost而不是localhost 。 如果从本地打开html文件,则应该创build一个本地服务器来提供该html文件,最简单的方法就是使用Web Server for Chrome 。 这将解决这个问题。

对于那些没有Python或Node.js的Windows,仍然有一个轻量级的解决scheme: Mongoose

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

此外, Z-WAMP是一个100%的便携式WAMP,运行在一个文件夹,这是真棒。 如果你需要一个快速的PHP和MySQL服务器,这是一个选项。

在Android应用程序中 – 例如,允许JavaScript通过file:///android_asset/setAllowFileAccessFromFileURLs(true)上的getSettings()获得的WebSettings上的WebSettings setAllowFileAccessFromFileURLs(true)

当在本地目录中使用json文件的浏览器上加载HTML文件时,我得到了这个确切的错误。 就我而言,我可以通过创build一个允许服务器静态内容的简单节点服务器来解决这个问题。 我在这个答案中留下了这个代码。

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

我build议你使用迷你服务器在本地主机上运行这些应用程序(如果你不使用一些内置的服务器)。

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

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

呃。 我刚刚发现了一些官方的话:“尝试加载使用dojo / text插件的未构build的远程AMD模块将由于跨源安全限制而失败(AMD模块的内置版本不受影响,因为dojo / text的调用被消除构build系统)。“ https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

加载本地文件的一种方法是在项目文件夹中使用它们,而不是在项目文件夹之外。 在您的项目示例文件下创build一个文件夹,类似于我们为图像创build的方式,并replace使用除项目path以外的完整本地path的部分,并使用项目文件夹下文件的相对URL。 它为我工作

对于所有你们都在MacOS …设置一个简单的LaunchAgent,以启用这些在你自己的Chrome副本中的魅力…

保存一个plist ,在~/Library/LaunchAgents命名为whateverlaunch.chrome.dev.mode.plist ,例如),内容类似于…

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

应该在启动时启动..但是您可以随时使用terminal命令强制执行此操作

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

TADA! </s>💁🏻🙊🙏🏾

很多问题,我的问题是缺less'/'例如:jquery-1.10.2.js:8720 XMLHttpRequest无法加载http:// localhost:xxxProduct / getList_tagLabels /它必须是: http:// localhost:xxx / Product / getList_tagLabels /

我希望这有助于谁遇到这个问题。